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);
Related
I have some categories:
<div class="cbp-l-inline-title" style=" font-size: 18px;">
<span style="color: #0669b4">Generic Name:</span>
<a><?php echo $category[0]['generic_name'];?></a>
</div>
and I want on click to insert value of this <a> to this form
<form method="post" action="/search/index" class="input-group" style="width: 45%; margin-left: 646px">
<input type="text" name="search" id="search" class="form-control" minlength=3 placeholder="Generic" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div id="suggesstion"></div>
<div class="input-group-btn input-group-append">
<button class="btn btn-primary btn-outline-secondary" type="submit" name="submit">Search</button>
</div>
</form>
so that it dynamically starts search of results of this string. I can't send this value to url because it is not latin characters
html
<div class="cbp-l-inline-title" style=" font-size: 18px;">
<span style="color: #0669b4">Generic Name:</span>
<p class="clickMe">click me: text to send after click</p>
</div>
<form method="post" class="input-group">
<input type="text" name="search" id="search" class="form-control" minlength=3
placeholder="Generic" aria-label="Recipient's username"
aria-describedby="basic-addon2">
<div id="suggesstion"></div>
<div class="input-group-btn input-group-append">
<button class="btn btn-primary btn-outline-secondary" type="submit" name="submit">Search</button>
</div>
</form>
And javascript in jquery
$('.clickMe').on('click', function(){
var value = $(this).text()
$('input#search').val(value)
})
https://jsfiddle.net/ora0j4uu/
.submit() if you want submit it as well https://www.w3schools.com/jsref/met_form_submit.asp
edit:
jquery for submit
$('.clickMe').on('click', function(){
var value = $(this).text()
console.log(value)
$('input').val(value)
$('.input-group').submit()
})
i have a problem with angulare code. I have made a small form structure with ng reapet . When i removed one of element every element down of them are not show the "not valid" message . All up of them work fine but down of remove not showing info not given the false of this data-ng-show="Zhf.w{{key}}.$error.pattern" why ng show not taked false.
<form name="zhf" class="form-horizontal">
<div data-ng-repeat="(key, i) in vm.items.Info | limitTo: (vm.NumberOfDays)">
<div class="col-sm-3">
<input type="text" class="form-control" id="w{{key}}" name="w{{key}}" ng-model="vm.item[key].w" placeholder="0" ng-pattern="/^[0-9]{1,10}([,.][0-9]{1,2})?$/" required>
<p style="color: #a94442" class="text-danger" data-ng-show="Zhf.w{{key}}.$error.pattern">
<span>Not a valid number!</span>
</p>
</div>
<div class="col-sm-2">
<button type="button" class="btn btn-danger btn-sm " ng-click="vm.delete(key)">remove</button>
</div>
</div>
</form>
vm.delete = function(index) {
vm.items.Info.splice(index, 1);
vm.item.splice(index, 1);
vm.NumberOfDays -= 1;
}
I have updated your ng-repeat section to validate form and sample is HERE
<form novalidate="novalidate" name="inputValidate">
<div ng-repeat="field in fields.test">
<div style="width:600px">
<div ng-form name="validMe" style="width:58%;float:left">
<input id="input{{$index}}" name="input{{$index}}" type="text" ng-model="field.value" ng-pattern="/^[0-9]{1,10}([,.][0-9]{1,2})?$/" required>
<span style="color: #a94442" ng-show="validMe['input\{\{$index\}\}'].$error.pattern">Not a valid number!</span>
<span style="color: #a94442" ng-show="validMe['input\{\{$index\}\}'].$error.required ">Number Required!</span>
</div>
<div style="width:20%;float:left">
<input type="button" value="Remove" ng-click="delete($index)"/>
</div>
</div>
</div>
</form>
I have the following code snippet:
(document)
.on("submit", ".edit-employee-form", function (e) {
e.preventDefault();
$.ajax({
type: "POST",
url: $(this).attr("action"),
method: $(this).attr("method"),
dataType: "html",
context: this,
data: $(this).serialize(),
success: function (response) {
p = $(this).parent();
p.prevAll('#first-name').html($(this).find("#first_name").val());
p.prevAll('#last-name').html($(this).find("#last_name").val());
p.prevAll('#email').html($(this).find("#email").val());
p.prevAll('#remain_case').html($(this).find("#remain_case").val());
$(this).parent().hide();
console.log('yay');
},
error: function (response, error) {
console.log("ERROR");
console.log(response);
console.log(error);
}
});
}
);
What it does is it submits a form to edit a particular employee (a list is displayed on the page) and then updates the html to reflect the changes the user submitted.
My problem is that some of the employees are also added via ajax calls, so their corresponding list elements are added dynamically to the html. I don't seem to be able to access their divs with id first-name, last-name, email etc. Any advice on how I can select divs which have been added dynamically?
I'm sorry for this being an image but I don't seem to be able to copy off the chrome console. The second element is added dynamically.
<div class="container firm-employees">
<div class="row">
<div class="col-lg-3 table-header">Name</div>
<div class="col-lg-2 table-header">Surname</div>
<div class="col-lg-3 table-header">E-Mail</div>
<div class="col-lg-1 table-header">Cases</div>
<div class="col-lg-3 table-header">Options</div>
</div>
<div class="row manage-user-row">
<div class="col-lg-3" id="first-name">Gray</div>
<div class="col-lg-2" id="last-name">Sawyer</div>
<div class="col-lg-3" id="email">masakotypu#hotmail.com</div>
<div class="col-lg-1" id="remain_case">1</div>
<div class="col-lg-3">
<button type="button" id="205" class="btn btn-default btn-xs edit-user-button">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
Edit User
</button>
<a href="edit/22">
<button type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
Edit Secretaries
</button>
</a>
</div>
<div id="ed-205" class="edit-employee-box">
<form id="ef-205" class="edit-employee-form" method="get" action="http://127.0.0.1/tlaf/forms/index.php/app_user/update/205">
<div class="row">
<div class="col-lg-3">
<label for="first_name" class="form_label">First Name</label>
<input type="text" name="first_name" value="Gray" id="first_name" class="form-control">
</div>
<div class="col-lg-3">
<label for="last_name" class="form_label">Last Name</label>
<input type="text" name="last_name" value="Sawyer" id="last_name" class="form-control">
</div>
<div class="col-lg-3">
<label for="email" class="form_label">E-Mail</label>
<input type="text" name="email" value="masakotypu#hotmail.com" id="email" class="form-control">
</div>
<div class="col-lg-3">
</div>
</div>
<div class="row">
<div class="col-lg-3">
<label for="phone" class="form_label">Phone Number</label>
<input type="text" name="phone" value="+899-67-1063253" id="phone" class="form-control">
</div>
<div class="col-lg-3">
<label for="remain_case" class="form_label">Remaining Cases</label>
<input type="text" name="remain_case" value="1" id="remain_case" class="form-control">
</div>
<div class="col-lg-3">
</div>
<div class="col-lg-3">
</div>
</div>
<div class="row">
<div class="col-lg-3">
<br>
<input type="submit" class="btn btn-success btn-md" value="Update User">
<a href="edit/22">
<button type="button" class="btn btn-info btn-md">
Reset Password
</button>
</a>
</div>
<div class="col-gl-3">
</div>
</div>
</form>
</div>
</div>
<div class="row manage-case-row"><div class="col-lg-3" id="first-name">Evan</div><div class="col-lg-2" id="last-name">Thompson</div><div class="col-lg-3" id="email">pubazof#hotmail.com</div><div class="col-lg-1" id="remain_case">2</div><div class="col-lg-3"><button type="button" id="206" class="btn btn-default btn-xs edit-user-button"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Edit User</button> <button type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Edit Secretaries</button></div></div><div class="edit-employee-box" id="ed-206"><form id="ef-206" class="edit-employee-form" method="get" action="http://127.0.0.1/tlaf/forms/index.php/app_user/update/206"><div class="row"><div class="col-lg-3"><label for="first_name" class="form_label">First Name</label><input type="text" name="first_name" value="Evan" id="first_name" class="form-control"></div><div class="col-lg-3"><label for="last_name" class="form_label">Last Name</label><input type="text" name="last_name" value="Thompson" id="last_name" class="form-control"></div><div class="col-lg-3"><label for="email" class="form_label">E-Mail</label><input type="text" name="email" value="pubazof#hotmail.com" id="email" class="form-control"></div><div class="col-lg-3"> </div></div><div class="row"><div class="col-lg-3"><label for="phone" class="form_label">Phone Number</label><input type="text" name="phone" value="+927-10-4155477" id="phone" class="form-control"></div><div class="col-lg-3"><label for="remain_case" class="form_label">Remaining Cases</label><input type="text" name="remain_case" value="2" id="remain_case" class="form-control"></div><div class="col-lg-3"></div><div class="col-lg-3"> </div></div><div class="row"><div class="col-lg-3"><br><input type="submit" class="btn btn-success btn-md" value="Update User"><button type="button" class="btn btn-info btn-md">Reset Password</button></div><div class="col-gl-3"></div></div></form></div></div>
</div>
Your code should be sure the order of finished ajax calls because it's too fast to follow with human eyes. If when appending ajax call is not completed, you cannot select those elements using even element id.
To do so, you should put ajax function calls in "success handler".
if Number one is success then Number two in the one's success handler, and Number three in two's success handler, and so on...
The simple solution is to use PROMISE to get all of ajax relative functions in order.
Please refer to the link : https://api.jquery.com/promise/
To check the element is successfully appended in time, check out the console with 'console.info or console.log" or something like that. if it's length is 0, then the appending ajax call is not yet completed.
<div class="panel-footer">
<div class="input-group">
<input id="btn-input" type="text" class="form-control input-sm chat_input" placeholder="Wpisz tutaj swoją wiadomość..." />
<span class="input-group-btn">
<button class="btn btn-primary btn-sm" id="btn-chat">Wyślij</button>
</span>
</div>
</div>
I have HTML like above. My question is how to get the input value when I click on #btn-chat. I have been trying of jQuery functions like .prev() and .prevAll() but those didn't work for me.
Given that the input element has an id attribute it should be unique, so you can select it directly without the need to traverse the DOM:
$('#btn-chat').click(function() {
var inputVal = $('#btn-input').val();
// do something with the value here...
});
If, for whatever reason, you still want to use DOM traversal you can use closest() to get the nearest common parent to both elements, and then find():
$('#btn-chat').click(function() {
var inputVal = $(this).closest('.input-group').find('input').val();
// do something with the value here...
});
If you have multiple elements in your page with the same id attribute then your HTML is invalid and you would need to change it. In that case, use class attributes to identify and select the elements.
$("#btn-chat").click(function(){
var input_values = $(this).parent().parent().find("input").val();
alert(input_values);
});
As #RoryMcCrossan has pointed out, if you have multiple elements with the same id attribute, you would need to use a class attribute instead.
$(function() {
$('.btn-chat').on('click', function() {
var val = $(this).closest('.input-group').find('input.btn-input').val();
//OR $(this).parent().prev().val();
console.log( val );
});
});
$(function() {
$('.btn-chat').on('click', function() {
var val = $(this).closest('.input-group').find('input.btn-input').val();
console.log( val );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="panel-footer">
<div class="input-group">
<input type="text" class="form-control input-sm chat_input btn-input" placeholder="Wpisz tutaj swoją wiadomość..." />
<span class="input-group-btn">
<button class="btn btn-primary btn-sm btn-chat">Wyślij</button>
</span>
</div>
</div>
<div class="panel-footer">
<div class="input-group">
<input type="text" class="form-control input-sm chat_input btn-input" placeholder="Wpisz tutaj swoją wiadomość..." />
<span class="input-group-btn">
<button class="btn btn-primary btn-sm btn-chat">Wyślij</button>
</span>
</div>
</div>
<div class="panel-footer">
<div class="input-group">
<input type="text" class="form-control input-sm chat_input btn-input" placeholder="Wpisz tutaj swoją wiadomość..." />
<span class="input-group-btn">
<button class="btn btn-primary btn-sm btn-chat">Wyślij</button>
</span>
</div>
</div>
I was following a simple angular tutorial that basically shows a list of elements on the browser for a hard-coded array, and creates a form that adds more elements to this array and adds the new created elements on the browser directly.
After writing my code, I tried to add a new element to the array, but the implementation only adds a new element <li> without the title of it
see my code here on jsfiddle
https://jsfiddle.net/SaifHarbia/ht4jme7q/1/
the code is also posted below
my html
<div ng-app="bookmark" ng-controller="BookCtrl">
<ul>
<li ng-repeat="bookmark in bookmarks">
<a href="#" ng-click="setCurrentCategory(bookmark)">
{{bookmark.title}} </a>
</li>
</ul>
<button type="button" ng-click="startCreating();" class="btn btn-link">
<span class="glyphicon glipbicon-plus"></span>
Create Bookmark
</button>
<br><hr/>
<form class="create-form" ng-show="isCreating" role="form"
ng-submit="createBookmark(newBookmark)" novalidate>
<div class="form-group">
<label for="newBookmarkTitle">Bookmark Title</label>
<input type="text" class="form-control" id="newBookmarkTitle"
ng-mode="newBookmark.title" placeholder="Enter title">
</div>
<div class="form-group">
<label for="newBookmarkURL">Bookmark URL</label>
<input type="text" class="form-control" id="newBookmarkURL"
ng-mode="newBookmark.url" placeholder="Enter URL">
</div>
<button type="submit" class="btn btn-info btn-lg">Create</button>
<button type="button" class="btn btn-default btn-lg pull-right"
ng-click="cancelCreating()">Cancel</button>
</form>
</div>
my javascript:
var app=angular.module("bookmark", []);
app.controller("BookCtrl", function($scope){
$scope.bookmarks=[
{title: "Type1", url: "http://www.somewebsite.com/"},
{title: "Type2", url: "http://www.website.com/"}
]
function resetCreateForm(){
$scope.newBookmark={
title : '',
url:''
}
}
$scope.isCreating= false;
function startCreating(){
$scope.isCreating=true;
resetCreateForm();
}
function cancelCreating(){
$scope.isCreating = false;
}
function createBookmark(bookmark){
$scope.bookmarks.push(bookmark);
resetCreateForm();
}
$scope.startCreating= startCreating;
$scope.cancelCreating=cancelCreating;
$scope.createBookmark= createBookmark;
});
First, it's ng-model not ng-mode
and second, I added an ng-click to the create button, to push the newbookmark, and I removed the reset bookmark function
<div ng-app="bookmark" ng-controller="BookCtrl">
<ul>
<li ng-repeat="bookmark in bookmarks">
{{bookmark.title}}
</li>
</ul>
<button type="button" ng-click="startCreating();" class="btn btn-link">
<span class="glyphicon glipbicon-plus"></span>
Create Bookmark
</button>
<br><hr/>
<form class="create-form" ng-show="isCreating" role="form" ng-submit="createBookmark(newBookmark)" novalidate>
<div class="form-group">
<label for="newBookmarkTitle">Bookmark Title</label>
<input type="text" class="form-control" id="newBookmarkTitle" ng-model="newBookmark.title" placeholder="Enter title">
</div>
<div class="form-group">
<label for="newBookmarkURL">Bookmark URL</label>
<input type="text" class="form-control" id="newBookmarkURL" ng-model="newBookmark.url" placeholder="Enter URL">
</div>
<button type="submit" ng-click="createBookmark(newBookmark)" class="btn btn-info btn-lg">Create</button>
<button type="button" class="btn btn-default btn-lg pull-right" ng-click="cancelCreating()">Cancel</button>
</form>
</div>
and the javascript..
var app=angular.module("bookmark", []);
app.controller("BookCtrl", function($scope){
$scope.bookmarks=[
{title: "Type1", url: "http://www.hihi2.com/"},
{title: "Type2", url: "http://www.hihi2.com/"}
]
function resetCreateForm(){
$scope.newBookmark={
title : '',
url:''
}
}
$scope.isCreating= false;
function startCreating(){
$scope.isCreating=true;
resetCreateForm();
}
function cancelCreating(){
$scope.isCreating = false;
}
function createBookmark(bookmark){
// bookmark.id=$scope.bookmarks.length;
$scope.bookmarks.push(bookmark);
}
$scope.startCreating= startCreating;
$scope.cancelCreating=cancelCreating;
$scope.createBookmark= createBookmark;
});
You missed typed the ng-model as ng-mode for the elements newBookmarkTitle and newBookmarkURL. If you try now the following snippet, you will notice that works.
var app=angular.module("bookmark", []);
app.controller("BookCtrl", function($scope){
$scope.bookmarks=[
{title: "Type1", url: "http://www.hihi2.com/"},
{title: "Type2", url: "http://www.hihi2.com/"}
]
function resetCreateForm(){
$scope.newBookmark={
title : '',
url:''
}
}
$scope.isCreating= false;
function startCreating(){
$scope.isCreating=true;
resetCreateForm();
}
function cancelCreating(){
$scope.isCreating = false;
}
function createBookmark(bookmark){
// bookmark.id=$scope.bookmarks.length;
$scope.bookmarks.push(bookmark);
resetCreateForm();
}
$scope.startCreating= startCreating;
$scope.cancelCreating=cancelCreating;
$scope.createBookmark= createBookmark;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="bookmark" ng-controller="BookCtrl">
<ul>
<li ng-repeat="bookmark in bookmarks">
{{bookmark.title}}
</li>
</ul>
<button type="button" ng-click="startCreating();" class="btn btn-link">
<span class="glyphicon glipbicon-plus"></span>
Create Bookmark
</button>
<br><hr/>
<form class="create-form" ng-show="isCreating" role="form" ng-submit="createBookmark(newBookmark)" novalidate>
<div class="form-group">
<label for="newBookmarkTitle">Bookmark Title</label>
<!-- Here was the first problem-->
<input type="text" class="form-control" id="newBookmarkTitle" ng-model="newBookmark.title" placeholder="Enter title">
</div>
<div class="form-group">
<label for="newBookmarkURL">Bookmark URL</label>
<!-- Here was the second problem-->
<input type="text" class="form-control" id="newBookmarkURL" ng-model="newBookmark.url" placeholder="Enter URL">
</div>
<button type="submit" class="btn btn-info btn-lg">Create</button>
<button type="button" class="btn btn-default btn-lg pull-right" ng-click="cancelCreating()">Cancel</button>
</form>
</div>