We Keep Coding

Validation of the browser in dropdown form

I have implemented a dropdown for the login but when I submit it with some empty field the dropdown is closed and therefore the validation notifications of the browser don't appear.
This is my dropdown with the form:
<div class="btn-group dropleft" >
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<spring:message code="master.page.login"/>
</button>
<div class="dropdown-menu p-4" style="width: 250px;" aria-labelledby="dropdownMenu">
<form:form action="j_spring_security_check" modelAttribute="credentials">
<div class="form-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">#</span>
<form:input id="username" path="username" cssClass="form-control" aria-describedby="basic-addon1" required="required" />
<form:errors class="error" path="username" />
</div>
</div>
<div class="form-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon2">
<img src="images/password.png" style="height:15px;width:auto" />
</span>
<form:password id="password" path="password" cssClass="form-control" aria-describedby="basic-addon2" required="required"/>
<form:errors class="error" path="password" />
</div>
</div>
<button type="submit" class="btn btn-dark">Login</button>
<br />
<br />
<jstl:if test="${showError == true}">
<div class="alert alert-danger small" role="alert">
ERROR!
</div>
</jstl:if>
</form:form>
</div>
</div>
I have also tried adding an 'onclick' event for the submit to try to open the dropdown with jQuery but it doesn't seem that the button works as it should. I have used this code that, by contrast, has helped me to open the dropdown when there is an error of incorrect credentials when calling the database:
$(".dropleft").addClass("show");
$("#dropdownMenu").attr("aria-expanded", "true");
$(".p-4").addClass("show");
Any idea how to get to visualize the validation?

The problem is any click inside the dropdown closes it and it can be solved, in this particular case, with:
$("[modelAttribute='credentials']").click(e => { e.stopPropagation() })
For the record, placing a <form> inside a dropdown is a no:no.

Improving the answer of Andrei, for my case worked I've needed to add this code:
$(".dropdown-menu").click(function(e){
e.stopPropagation();
});

Make a html attributie with button role submit a form

I need to have my html attribute submit a form. My problem is that a normal button attribute is able to use the type="submit" and other attributes using role="button" don't do anything with the type.
So how do I make it submit a form? If you can give me a script to do it, that would be fine too.
(I don't know javascript myself)
My current code:
<form action="myloc" method="post">
<div class="input-group col-lg-6">
<a type="submit" class="btn btn-default input-group-addon" role="button">
Search<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</a>
<input type="search" class="form-control" name="search" id="search" placeholder="Search">
</div>
</form>

If I understand you correctly you want to submit the form when you press the button using javascript?
<form id="test" action="myloc" method="post">
<div class="input-group col-lg-6">
<a type="submit" class="btn btn-default input-group-addon" role="button" onclick="document.getElementById('test').submit();">
Search<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</a>
<input type="search" class="form-control" name="search" id="search" placeholder="Search">
</div>
</form>
Notice that what I did was to set an id ("test") on the form and then added an onclick event to the anchor element.

Here is your solution,
<form action="myloc" method="post" id="myForm">
<div class="input-group col-lg-6">
<a type="submit" class="btn btn-default input-group-addon" role="button" id="sub">
Search<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</a>
<input type="search" class="form-control" name="search" id="search" placeholder="Search">
</div>
</form>
Javascript code
var button=document.getElementById('sub');
button.onclick=function(){
document.getElementById("myForm").submit();
}

Give your <a> element an id, then set a jquery onclick function with that id to run whatever query you want.

datepicker with ng-repeat in Angular

I am writing one application where i need to show4 different date and Start/End Time.
So i have created date using datepicker. Below that i have one checkbox ,If user checks that check box it will add same set of date(default) So the maximum date would be 4.
So i tried using ng-repeat but seems some issue.
Kindly help
<div class="form-group">
<label>6. Enter Onsite Details( Up to 4)</label> <br>
<div ng-repeat="object in configDate track by $index">
<button bs-datepicker
class="btn btn-info"
id="comm_cal_bttn"
name="date"
data-animation="am-flip-x"
data-autoclose="true"
data-max-date="{{comm.maxDate}}"
data-min-date="{{comm.minDate}}"
ng-blur="getMinTime();"
ng-model="scheduled.commDate">
<i class="fa fa-fw fa-calendar" aria-hidden="true"></i> Date
</button>
<br>
<br>
<button bs-timepicker
class="btn btn-info"
id="comm_time_bttn"
name="Start Time"
data-animation="am-flip-x"
data-length="3"
data-minute-step="{{comm.minuteStep}}"
data-round-display="true"
min-time="{{comm.minTime}}"
ng-blur="checkValidTime();"
ng-disabled="! scheduled.commDate"
ng-keydown="disableKeys();"
ng-model="scheduled.commTime">
<i class="fa fa-fw fa-clock-o" aria-hidden="true"></i> Start Time
</button>
<button bs-timepicker
class="btn btn-info"
id="comm_time_bttn"
name="End Time"
data-animation="am-flip-x"
data-length="3"
data-minute-step="{{comm.minuteStep}}"
data-round-display="true"
min-time="{{comm.minTime}}"
ng-blur="checkValidTime();"
ng-disabled="! scheduled.commDate"
ng-keydown="disableKeys();"
ng-model="scheduled.commTime">
<i class="fa fa-fw fa-clock-o" aria-hidden="true"></i> End Time
</button>
<br>
<br>
</div>
<label for="cc_user">Location</label> <input type="text" ng-model="configDate">
<br>
<br>
<input type="checkbox" ng-model="configDate" ng-checked = "configDate.push(configDate)"> <label for="cc_user">Add Additional</label>
</div>

Checkboxes weird behaviour in AngularJS ng-repeat

I've a form containing input fields and checkboxes (table crud generating dynamically). See the image below:
Here, In my clients modal dialog form I've implemented small crud for adding/updating/deleting Providers data and showing table below of it on the fly.
Following is my code:
View:
<form name="clientForm" ng-submit="check(id)" ng-controller="ClientsController">
<div class="form-group">
<label for="name">Name</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-hand-right"></i></span>
<input type="text" class="form-control" id="title" placeholder="Enter Name" ng-model="client.name">
</div>
</div>
<div class="form-group">
<label for="email">Email</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-envelope"></i></span>
<input type="text" class="form-control" id="title" placeholder="Enter Email" ng-model="client.email">
</div>
</div>
<div class="form-group">
<label for="phone">Phone</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-earphone"></i></span>
<input type="text" class="form-control" id="title" placeholder="Enter Phone" ng-model="client.phone">
</div>
</div>
<div class="form-group">
<label for="phone">Providers</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-hand-right"></i></span>
<input type="text" class="form-control" id="title" ng-model="provider.provider_name" placeholder="Enter Provider Name">
</div>
<br>
<button type="button" id="addbtn" class="btn btn-sm btn-primary" ng-click="addProvider()">Add Provider</button>
<button type="button" id="editbtn" class="btn btn-sm btn-info" ng-click="updateProvider(id)">Update Provider</button>
<button type="button" id="editbtn" class="btn btn-sm btn-default" ng-click="clearProvider()">Clear Provider</button>
<br>
<table style="width: 50%; margin-top: 10px;" class="">
<tbody>
<tr ng-repeat="val in providersData">
<td>
<input type="checkbox" name="providersData" ng-model="$parent.client.providersList" value="{{val._id}}"/>
</td>
<td>{{val.provider_name}}</td>
<td>
<a style="color: blue;" href="javascript:void(0);" ng-click="editProvider(val._id)"><i class="glyphicon glyphicon-edit"></i></a>
<a style="color: red;" href="javascript:void(0);" title="Delete" confirmed-click="removeProvider(val._id)" ng-confirm-click="Are you sure you want to remove provider?"><i class="glyphicon glyphicon-trash"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="well well-lg text-center bg-gray">
<button class="btn btn-success" ng-if="id">Save Client</button>
<button class="btn btn-danger" ng-if="id" title="Delete" confirmed-click="remove(client._id)" ng-confirm-click="Are you sure you want to remove?">Delete</button>
<button type="button" class="btn btn-warning" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button class="btn btn-success" ng-if="!id">Add Client</button>
</div>
</form>
Controller:
$scope.showModal = false;
$scope.client = {};
$scope.provider = null;
$scope.addClient = function () {
alert(JSON.stringify($scope.client));
$http.post('/clients', {param: $scope.client}).success(function (response) {
if (response) {
alert("Client added successfully");
$scope.client = "";
refresh();
$scope.closemodal();
}
});
};
Now I want to insert/update selected checkboxes value to db along with Name, Email, and Phone field.
Here I'm facing following issues:
Whenever I'm clicking on any checkbox its checking all checkboxes.
After clicking on Add Client button its showing result of alert(JSON.stringify($scope.client)) like this
{"name":"asdfdsafasdf","email":"sdf","phone":"sadf","providersList":{"id":true}}
In mongodb its showing like this:
I've search a lot tried this and ng-model="$parent.client.providersList.id" but still its not working.
I'm beginner in AngularJS and just started working on it.
Any help would be appreciated.

You should use ng-true-value & ng-false-value over the checkbox(I'm considering default value to be 0). And then use $index of providersData ng-repeat to create an array of client.providersList.
Markup
<input type="checkbox" name="{{'providersData'+$index}}"
ng-model="client.providersList[$index].id" ng-true-value="val._id" ng-false-value="0" />

You are facing this problem because of the value of your ng-model attribute. The value for ng-model attribute must be different for each checkbox. Here, try this:
<input type="checkbox" name="providersData" ng-model="client.providersList{{$index}}" ng-value="val._id" />
Try something like this:
$scope.client = {};
$scope.client.providersList = [];
// Now watch the model for changes
$scope.$watch('client', function(){
// When the checkbox is selected it returns true
if($scope.client.providersList1 == true){
$scope.client.providersList.push({"id": value})
}
// Repeat the if statements for all the checkboxes (or use a for loop)
}, true);

How to submit text input inside <div> class element (wysiwyg editor)

am using summernote (wysiwyg) text editor. In previous editors value could be submitted using <textarea>. The current editor only use <div> element and if I replace the <div> class with <textarea> the editor stop to work.
The summernote code is
And my textarea is <textarea name='candidate_description'></textarea>
My form is submitted by JavaScript function
<form class="form-inline" role="form" action="#" method="post" accept- charset="utf-8" id="electroal" enctype="multipart/form-data">
<script>
function submitForm(action){
document.getElementById('electroal').action = action;
document.getElementById('electroal').submit();
}
</script>
<i class="fa fa-refresh"></i> <b>Refresh</b>
<button type="submit" onclick="submitForm('<?php echo $link[0]; ?>')"></i>Save</button>
<button type="submit" onclick="submitForm('<?php echo $link[1]; ?>')"></i>Cancel</button>
<div class="form-group input-xxx-x-wider">
<h6><strong>Description (500 max) <i class="glyphicon glyphicon-star red" ></i></strong></h6>
<div class="widget-main no-padding">
<div id="summernote"></div>
</div>
<textarea name="candidate_description"></textarea>
</div>
<div class="form-group input-x-wider">
<h6><strong>Status <i class="glyphicon glyphicon-star red" ></i></strong>| <i>Enable to use or Disable to use later </i></h6>
<label>
<input name="candidate_status" value="9" type="radio" checked="checked" class="colored-success">
<span class="text"> Enabled</span>
</label>
<label>
<input name="candidate_status" value="10" type="radio" class="colored-danger">
<span class="text"> Disabled</span>
</label>
</div>
</form>
I have zero knowledge in Jquery but I can try to catch up please help me.
->My main goal is to submit the the form with the text edited inside the <div id="summernote">some edited text here</div> element
I used function submitForm(action) to submit form because the links placed on onclick="submitForm('<?php echo $link[0]; ?>')" are dynamic and changes according to who login.
On web browser it looks like
<form class="form-inline" role="form" action="#" method="post" accept-charset="utf-8" id="electroal" enctype="multipart/form-data">
<script>
function submitForm(action){
document.getElementById('electroal').action = action;
document.getElementById('electroal').submit();
}
</script>
<button type="submit" onclick="submitForm('http://localhost/ANU_ELECTRAL1/candidate/save')">Save</button>
<button type="submit" onclick="submitForm('http://localhost/ANU_ELECTRAL1/candidate')">Cancel</button>
<div class="form-group input-xxx-x-wider">
<h6><strong>Description (500 max) <i class="glyphicon glyphicon-star red" ></i></strong></h6>
<div class="widget-main no-padding">
<div id="summernote"></div>
</div>
<textarea name="candidate_description"></textarea>
</div>
<div class="form-group input-x-wider">
<h6><strong>Status <i class="glyphicon glyphicon-star red" ></i></strong>| <i>Enable to use or Disable to use later </i></h6>
<label>
<input name="candidate_status" value="9" type="radio" checked="checked" class="colored-success">
<span class="text"> Enabled</span>
</label>
<label>
<input name="candidate_status" value="10" type="radio" class="colored-danger">
<span class="text"> Disabled</span>
</label>
</div>
</form>