my checkbox is not selecting any box in angularjs - javascript

*here is html codei am trying to fetch checkbox value which are coming from database but my checkbox is not selected any value,only checkbox is showing but not selecting any value....
ng-controller="noduesaccountsmodalcontroller" ng-init="init()">
<form name="accounts" ng-submit=submit(accounts) novalidate>
<table class="table">
<thead>
<tr>
<th>item</th>
<th>received</th>
</tr>
</thead>
<tbody ng-repeat="emp in nodueaccountassets">
<tr>
<td>{{emp}}</td> <td> <input type="checkbox" ng-model="emp.selected" value="{{emp.name}}"/></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
{{albumNameArray}}
<!-- <input type="checkbox" value="{{emp}}" ng-model="checked" ng-init="checked=true"{{emp}}><br /> -->
<button type="submit" value="submit" class="btn btn-primary">ACCEPT</button>
<button class="btn btn-warning" ng-click="popup.$rollbackViewValue();">REJECT</button>
js controller code is
application.controller('noduesaccountsmodalcontroller',function ($scope,$http,$window,$modal,$filter)
$scope.nodueaccountassets=data.list;
/*alert($scope.nodueaccountassets)*/
})
})
$scope.submit=function(form){
$scope.albumNameArray = [];
angular.forEach($scope.nodueaccountassets,function(emp){
if (emp.selected) $scope.albumNameArray.push(emp.name);
alert(emp.selected);
/*$scope.albumNameArray = $scope.nodueaccountassets.filter(function(emp){
return emp.selected;
alert(emp.selected);*/
})
/*var emp_data='emp_assets='+$scope.nodueaccountassets+'&accounts_comments='+$scope.empcomments+'&emp_code='+$scope.emplycode;
alert("data is"+emp_data)
$http.get(domain+'/insertaccountassets?'+emp_data)
.success(function(data, status, headers, config){
alert('submit successfully');
})
.error(function(data, status, headers, config){
alert(data);
})
alert("error while submitting")
}
$scope.reject=function(form)
{
$modal.dismiss('reject');
var emp_data='accounts_comments='+$scope.empcomments+'& emp_code='+$scope.emplycode;
alert(emp_data)
$http.get(domain+'/insertaccountassets?'+emp_data)
}*/
}
});

I have made a plunker out of your provided code and made some tweaks to your HTML and JS code.
Make sure your JSON data has objects in the array so that when you create .selected property to the array object and assign as ng-model to your checkbox it woks properly
In HTML
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script data-require="angularjs#1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app" ng-controller="noduesaccountsmodalcontroller" ng-init="init()">
<form name="accounts" ng-submit="submit(accounts)" novalidate="">
<table class="table">
<thead>
<tr>
<th>item</th>
<th>received</th>
</tr>
</thead>
<tbody ng-repeat="emp in nodueaccountassets">
<tr>
<td>{{emp.name}}</td>
<td>
<input type="checkbox" ng-model="emp.selected" value="{{emp.name}}" />
</td>
</tr>
</tbody>
</table>
{{selectedItems}}
<!-- <input type="checkbox" value="{{emp}}" ng-model="checked" ng-init="checked=true"{{emp}}><br /> -->
<button type="submit" value="submit" class="btn btn-primary">ACCEPT</button>
<button class="btn btn-warning" ng-click="popup.$rollbackViewValue();">REJECT</button>
</form>
</body>
</html>
In JS
var app = angular.module('app',[]);
app.controller('noduesaccountsmodalcontroller',function($scope){
$scope.nodueaccountassets = [{'name':'x'},{'name':'a'},
{'name':'b'},{'name':'c'},{'name':'d'}];
$scope.init= function(){
};
$scope.selectedItems =[];
$scope.submit = function(acc){
angular.forEach($scope.nodueaccountassets,function(emp){
if(emp.selected){
$scope.selectedItems.push(emp.name);
}
});
};
});

Related

AngularJs form submit issuse

I use AngularJs to achieve submit function. When I click submit button, It does not save the form and show the data. Where am I wrong. Could you please help to check it. Thanks !
(function() {
var app = angular.module('store', []);
var movies = [{
name: 'People Places Things',
releaseDay: '14/08/2015',
Duration: '85 mins',
Genre: 'Comedy',
Synopsis: 'sdfasdfasdfsadfasdfsadfasdf',
}];
app.controller('StoreController', function() {
this.products = movies;
});
app.controller("MovieController", function() {
this.movie = {};
this.addMovie = function(product) {
product.movies.push(this.movie);
this.movie = {};
};
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html ng-app="store">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<link href="main.css" rel="stylesheet" type="text/css">
<title>Untitled Document</title>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body ng-controller="StoreController as store">
<div ng-repeat="product in store.products">
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<h1>Moives Recommendation</h1>
<p>
<div>
<table style="width: 80%">
<tr>
<th>Title</th>
<th id="mvTitle">{{product.name}}</th>
</tr>
<tr>
<th>Release date</th>
<th>{{product.releaseDay}}</th>
</tr>
<tr>
<th>Duration</th>
<th>{{product.Duration}}</th>
</tr>
<tr>
<th>Genre</th>
<th>{{product.Genre}}</th>
</tr>
<tr>
<th>Synopsis</th>
<th>{{product.Synopsis}}</th>
</tr>
</table>
</div>
<div>
<form name="movieForm" ng-controller="MovieController as movieCtrl" ng-submit="movieCtrl.addMovie(product)">
<table style="width: 80%">
<tr>
<th>Title</th>
<th>{{movieCtrl.product.name}}</th>
</tr>
<tr>
<th>Release date</th>
<th>{{movieCtrl.product.releaseDay}}</th>
</tr>
<tr>
<th>Duration</th>
<th>{{movieCtrl.product.Duration}}</th>
</tr>
<tr>
<th>Genre</th>
<th>{{movieCtrl.product.Genre}}</th>
</tr>
<tr>
<th>Synopsis</th>
<th>{{movieCtrl.product.Synopsis}}</th>
</tr>
</table>
<br>Title:<input ng-model="movieCtrl.product.name" type="text" name="Title" /><br> Release date:<input ng-model="movieCtrl.product.releaseDay" type="text" name="ReleaseDate" /><br> Duration: <input ng-model="movieCtrl.product.Duration" type="text"
name="Duration" /><br> Genre:
<input ng-model="movieCtrl.product.Genre" type="text" name="Genre" /><br> Synopsis:
<textarea ng-model="movieCtrl.product.Synopsis"></textarea><br>
<input type="submit" value="Submit" />
</form>
</div>
</p>
</div>
</body>
</html>
I use AngularJs to achieve submit function. When I click submit button, It does not save the form and show the data. Where am I wrong. Could you please help to check it. Thanks !
I think the problem is in the addMovie function, but I can not find it.
You have a lot of things wrong in your code, here is working snippet
Note:Using $rootScope is not recommended but you have different controller setup in your code, thats why i tried $rootScope approach but you should use services to do this kind of Task:
(function() {
var app = angular.module('store', []);
var movies = [{
name: 'People Places Things',
releaseDay: '14/08/2015',
Duration: '85 mins',
Genre: 'Comedy',
Synopsis: 'sdfasdfasdfsadfasdfsadfasdf',
}];
app.controller('StoreController', function($rootScope) {
$rootScope.products = movies;
});
app.controller("MovieController", function($rootScope) {
this.product = {};
this.addMovie = function(product) {
$rootScope.products.push(product);
this.product = {};
};
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html ng-app="store">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<link href="main.css" rel="stylesheet" type="text/css">
<title>Untitled Document</title>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body ng-controller="StoreController as store">
<div >
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<h1>Moives Recommendation</h1>
<div ng-repeat="product in $root.products">
<table style="width: 80%">
<tr>
<th>Title</th>
<th id="mvTitle">{{product.name}}</th>
</tr>
<tr>
<th>Release date</th>
<th>{{product.releaseDay}}</th>
</tr>
<tr>
<th>Duration</th>
<th>{{product.Duration}}</th>
</tr>
<tr>
<th>Genre</th>
<th>{{product.Genre}}</th>
</tr>
<tr>
<th>Synopsis</th>
<th>{{product.Synopsis}}</th>
</tr>
</table>
</div>
<div>
<form name="movieForm" ng-controller="MovieController as movieCtrl" ng-submit="movieCtrl.addMovie(movieCtrl.product)">
<br>Title:<input ng-model="movieCtrl.product.name" type="text" name="Title" /><br> Release date:<input ng-model="movieCtrl.product.releaseDay" type="text" name="ReleaseDate" /><br> Duration: <input ng-model="movieCtrl.product.Duration" type="text"
name="Duration" /><br> Genre:
<input ng-model="movieCtrl.product.Genre" type="text" name="Genre" /><br> Synopsis:
<textarea ng-model="movieCtrl.product.Synopsis"></textarea><br>
<input type="submit" value="Submit" />
</form>
</div>
</div>
</body>
</html>
In addMovie function, you should add movie to movies array only. correct function would be like:
this.addMovie = function(product) {
movies.push(this.movie);
this.movie = {};
};
Other than that, you have some serious issues in your code like
Loading angular more than once.
Using form in ng-repeat itself.
I think it should be like this. Because you are using controllerAs syntax so this you should put controllerAs variable before functions or objects.
ng-submit="movieCtrl.addMovie(movieCtrl.product)"
Edit:
You have some problem in the sample. Because you are using multiple controller and each controller is responsible for some action. After add new product by MovieController you should emit it for StoreController to display newest product in the view. So for communication two controller you can use $broadcast and $on function. As you see in the demo.
and other problem was in displaying products. for displaying the products you should use nested ng-repeat.
Demo
(function() {
var app = angular.module('store', []);
var movies = [{
name: 'People Places Things',
releaseDay: '14/08/2015',
Duration: '85 mins',
Genre: 'Comedy',
Synopsis: 'sdfasdfasdfsadfasdfsadfasdf',
}];
app.controller('StoreController', function($rootScope) {
$rootScope.products = movies;
});
app.controller("MovieController", function($rootScope) {
this.product = {};
this.addMovie = function(product) {
$rootScope.products.push(product);
this.product = {};
};
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html ng-app="store">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<link href="main.css" rel="stylesheet" type="text/css">
<title>Untitled Document</title>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body ng-controller="StoreController as store">
<div >
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<h1>Moives Recommendation</h1>
<div ng-repeat="product in $root.products">
<table style="width: 80%">
<tr>
<th>Title</th>
<th id="mvTitle">{{product.name}}</th>
</tr>
<tr>
<th>Release date</th>
<th>{{product.releaseDay}}</th>
</tr>
<tr>
<th>Duration</th>
<th>{{product.Duration}}</th>
</tr>
<tr>
<th>Genre</th>
<th>{{product.Genre}}</th>
</tr>
<tr>
<th>Synopsis</th>
<th>{{product.Synopsis}}</th>
</tr>
</table>
</div>
<div>
<form name="movieForm" ng-controller="MovieController as movieCtrl" ng-submit="movieCtrl.addMovie(movieCtrl.product)">
<br>Title:<input ng-model="movieCtrl.product.name" type="text" name="Title" /><br> Release date:<input ng-model="movieCtrl.product.releaseDay" type="text" name="ReleaseDate" /><br> Duration: <input ng-model="movieCtrl.product.Duration" type="text"
name="Duration" /><br> Genre:
<input ng-model="movieCtrl.product.Genre" type="text" name="Genre" /><br> Synopsis:
<textarea ng-model="movieCtrl.product.Synopsis"></textarea><br>
<input type="submit" value="Submit" />
</form>
</div>
</div>
</body>
</html>

How to solve [$injector:unpr] error for AngularJS?

I have started learning AngularJS and facing issue while injecting a service which is in another file. I have tried many ways but nothing is working out.
This is my index.html:
` <!DOCTYPE html>
<html ng-app="employeedirectory" ng-controller="homeController as vm">
<head>
<title>Employee Directory</title>
<link type="text/css" rel="stylesheet" href="./../bootstrap.min.css" />
</head>
<body>
<div class="container" >
<br/>
<h1 align="center">Employee Directory</h1><br/><br/>
<table class="table">
<thead>
<tr>
<td>Name</td>
<td>Email</td>
<td>Date of Birth</td>
<td>Department</td>
<td>Gender</td>
<td>Age</td>
</tr>
</thead>
<tbody>
<tr>
<form>
<td>
<input class="form-control" ng-model="employee.name" required placeholder="Name" />
</td>
<td>
<input type="email" ng-model="employee.email" required class="form-control" placeholder="abc#xyz.com" />
</td>
<td>
<input type="text" ng-model="employee.dob" id="datepicker" class="form-control" required placeholder="YYYY-MM-DD" />
</td>
<td>
<input ng-model="employee.department" required class="form-control" placeholder="Department" />
</td>
<td>
<input ng-model="employee.gender" required class="form-control" placeholder="Gender" />
</td>
<td>
<input type="number" ng-model="employee.age" disabled class="form-control" placeholder="Age" />
</td>
<td>
<button class="btn btn-primary btn-md" ng-click="vm.addEmployee()">Add Employee</button>
<td><button class="btn btn-info btn-md" ng-click="updateEmployee()">Update Employee</button></td>
</td>
</form>
</tr>
</tbody>
</table>
</div>
<script src="./../angular.min.js"></script>
<script src="./home.controller.js"></script>
</body>
</html>`
This is my controller:
(function () {
'use strict';
angular.module('employeedirectory', [])
.controller('homeController', ['homeService',homeController]);
function homeController() {
var vm = this;
vm.addEmployee = function () {
console.log("in add employee");
// homeService.addEmployee();
}
}
})();
this is my service
(function () {
'use strict';
angular
.module('employeedirectory')
.service('homeService', homeService);
function homeService() {
// var service = {};
// service.addEmployee = function (details) {
// console.log("in home service");
// };
// return service;
}
})();
I am getting this error:
angular.min.js:123 Error: [$injector:unpr] http://errors.angularjs.org/1.6.4/$injector/unpr?p0=homeServiceProvider%20%3C-%20homeService%20%3C-%20homeController
at angular.min.js:6
at angular.min.js:45
at Object.d [as get] (angular.min.js:43)
at angular.min.js:45
at d (angular.min.js:43)
at e (angular.min.js:43)
at Object.invoke (angular.min.js:43)
at S.instance (angular.min.js:94)
at n (angular.min.js:69)
at g (angular.min.js:61)
you have to reference your service in the index.html
<html>
<head>
<title>Employee Directory</title>
<link type="text/css" rel="stylesheet" href="./../bootstrap.min.css" />
</head>
<body>
// .....
<script src="./../angular.min.js"></script>
<script src="./home.controller.js"></script>
<script src="./homeService.js"></script>
</body>
This way the controller will know what you are trying to inject.

How to save form input into session variable using ColdFusion?

I am trying to save form input into session variable using ColdFusion. I have tried many methods that I found posted on websites, but none of it is working on my code. Can anyone guide me on this?
Below is my full code.
<html>
<head>
<link rel="STYLESHEET" href="css/iesync2.css" type="text/css">
<link rel="STYLESHEET" href="css/iesync_style(awps).css" type="text/css">
<!--- <link rel="stylesheet" href="css/bootstrap-3.3.6-dist/js/jquery-ui-1.8.10.custom.css" /> --->
<link href="css/bootstrap-3.3.6-dist/js/bootstrap.min.css" rel="stylesheet">
<script src="css/bootstrap-3.3.6-dist/js/jquery-1.11.3.min.js"></script>
<!--- <script src="css/bootstrap-3.3.6-dist/js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/iesync_popup.js"></script> --->
<script language="javascript" src="css/bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<cfoutput>
<script language="JavaScript">
function check() {
var f = document.frmAddModel;
if (f.brandName.value.length == 0) {
alert("Please Insert Brand Name");
f.brandName.focus();
return;
} else if (f.brandName.value.length > 0){
/*window.close();*/
}
}
</script>
</cfoutput>
</head>
<body>
<cfoutput>
<cfif structKeyExists(form,"submit")>
<cfset session.brandName = "#form.brandName#">
</cfif>
<center>
<div>
<form name="frmAddModel" action="" method="post" onSubmit="">
<br />
<table border="0" cellpadding="2" cellspacing="2" width="50%">
<tr>
<td colspan="2" align="left" class="cssSubTitleC">Model</td>
</tr>
<tr class="cssLine2L">
<td align="left">Brand Code (optional)</td>
<td><input type="Text" name="brandcode" size="25" class="cssForm" maxlength="10"></td>
</tr>
<tr class="cssLine2L">
<td align="left" class="cssLine2L">Brand Name<font class="cssRequired">*</font></td>
<td><input type="Text" name="brandName" size="25" class="cssForm" maxlength="10"></td>
</tr>
</table>
<table border="0" width="50%" style="padding: 10px;">
<tr>
<td class="cssButtonLine" colspan="2">
<input type="button" name="submit" class="btn btn-primary" onclick="check()" value= "Save">
</td>
</tr>
</table>
</form>
</div>
</center>
</cfoutput>
</body>
</html>
You are never submitting the form in your JavaScript. Add an id to your form and this $("#form-id").submit(); to your function and try again.
Add an id to your form:
<form name="frmAddModel" id="frmAddModel" action="" method="post" onSubmit="">
Then add this $("#frmAddModel").submit(); to your function:
<script language="JavaScript">
function check() {
var f = document.frmAddModel;
if (f.brandName.value.length == 0) {
alert("Please Insert Brand Name");
f.brandName.focus();
return;
} else if (f.brandName.value.length > 0){
$("##frmAddModel").submit();
/*window.close();*/
}
}
</script>
NOTE: you need to use double hash-tags ## because your JavaScript function is currently wrapped by cfoutput tags. Although that does not appear to be necessary as currently written.
Change field type from 'button' to 'submit':
<input type="submit" name="submit" class="btn btn-primary" onclick="check()" value= "Save">

How to get and submit the selected item(s) in shopping cart?

How to get and submit the selected item(s) in shopping cart?
Below is my demo,
there are 2 questions:
1、At present,I can only get one item manually,how to get all the selected item(s)?
2、If nothing was selected,I want the button "submit" to be disable.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" type='text/css'>
<link href="https://cdn.bootcss.com/tether/1.2.0/css/tether.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/tether/1.2.0/css/tether-theme-basic.min.css" rel="stylesheet">
</head>
<body>
<div class="container" id="goodsTable">
<table class="table">
<thead>
<tr>
<th class="col-xs-3">
<label class="c-input c-checkbox">
<input type="checkbox" name="selectAll" id="selectAll">
<span class="c-indicator"></span>Select All
</label>
</th>
<th class="col-xs-5">Name</th>
<th class="col-xs-4">Number</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-xs-3">
<label class="c-input c-checkbox">
<input type="checkbox" name="domainList" id="goods_100" class="checkboxSelection">
<span class="c-indicator"></span>
</label>
</td>
<td class="col-xs-5">Apple</td>
<td class="col-xs-4"><input type="text" class="form-control" id="number_100" value="1000"></td>
</tr>
<tr>
<td class="col-xs-3">
<label class="c-input c-checkbox">
<input type="checkbox" name="domainList" id="goods_101" class="checkboxSelection">
<span class="c-indicator"></span>
</label>
</td>
<td class="col-xs-5">Pear</td>
<td class="col-xs-4"><input type="text" class="form-control" id="number_101" value="1200"></td>
</tr>
<tr>
<td class="col-xs-3">
<label class="c-input c-checkbox">
<input type="checkbox" name="domainList" id="goods_102" class="checkboxSelection">
<span class="c-indicator"></span>
</label>
</td>
<td class="col-xs-5">Peach</td>
<td class="col-xs-4"><input type="text" class="form-control" id="number_102" value="1500"></td>
</tr>
</tbody>
</table>
<button type="button" id="submit" class="btn btn-primary">Submit</button>
</div>
<script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/tether/1.2.0/js/tether.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<script>
//Select all
$("#selectAll").change(function () {
if ($(this).is(":checked")) {
$(".checkboxSelection").each(function () {
$(this).prop('checked', true);
});
}
else {
$(".checkboxSelection").each(function () {
$(this).prop('checked', false);
});
}
});
$(".checkboxSelection").change(function () {
var allSelected = true;
$(".checkboxSelection").each(function () {
if (!$(this).is(":checked")) {
$("#selectAll").prop('checked', false);
allSelected = false;
}
});
if (allSelected)
$("#selectAll").prop('checked', true);
});
</script>
<script>
//Get the value and submit
$(function () {
//Below is getting one of the items,how to get all the selected item(s) ?
var data = {
"name": $("#goods_100").val(),
"number": $("#number_100").val()
};
//ajax submit
$(document).on('submit', '#goodsTable', function (e) {
e.preventDefault();
$("#submit").addClass('disabled');
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
type: "POST",
url: "{{ url('/goods/') }}",
cache: false,
data: data,
dataType: "json"
})
.done(function (msg) {
window.location.href = "/goods/success";
})
.fail(function (textStatus) {
$("#submit").removeClass('disabled');
alert('Fail,try again');
});
});
});
</script>
</body>
</html>
Every one of your checkboxes have the same name, so what's happening is:
domainList = on
domainList = on
domainList = on
domainList = on
And only the last one gets sent. You need to add [] to the name to make it an array.
domainList[] = on
domainList[] = on
domainList[] = on
domainList[] = on
That will give the Laravel controller an array instead of just one.
Example:
<input type="checkbox" name="domainList[]" id="goods_102" class="checkboxSelection">
But, you're using these are checkboxes. They have a default value of "on" and only show up in form data when checked. You should definitely add a value to it that represents the item's database row.
For instance:
<input type="checkbox" name="domainList[]" id="goods_102" class="checkboxSelection" value="stackoverflow.com" >
That would return an array of strings
domainList[] = stackoverflow.com
domainList[] = stackexchange.com
domainList[] = serverfault.com
Update your script with below for your second question:
$(document).ready(function(){
if($(".table tr input[type='checkbox']:checked").length > 0)
{
$('#submit').attr("disabled",false);
}
else
{
$('#submit').attr("disabled","disabled");
}
//Select all
$("#selectAll").change(function () {
if ($(this).is(":checked")) {
$(".checkboxSelection").each(function () {
$(this).prop('checked', true);
});
$('#submit').attr("disabled",false);
}
else {
$(".checkboxSelection").each(function () {
$(this).prop('checked', false);
});
$('#submit').attr("disabled","disabled");
}
});
$(".checkboxSelection").change(function () {
var allSelected = true;
$(".checkboxSelection").each(function () {
if (!$(this).is(":checked")) {
$("#selectAll").prop('checked', false);
allSelected = false;
}
});
if (allSelected)
{
$("#selectAll").prop('checked', true);
}
if($(".table tr input[type='checkbox']:checked").length < 1)
{
$('#submit').attr("disabled","disabled");
}
else
{
$('#submit').attr("disabled",false);
}
});
});
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" type='text/css'>
<link href="https://cdn.bootcss.com/tether/1.2.0/css/tether.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/tether/1.2.0/css/tether-theme-basic.min.css" rel="stylesheet">
</head>
<body>
<div class="container" id="goodsTable">
<table class="table">
<thead>
<tr>
<th class="col-xs-3">
<label class="c-input c-checkbox">
<input type="checkbox" name="selectAll" id="selectAll">
<span class="c-indicator"></span>Select All
</label>
</th>
<th class="col-xs-5">Name</th>
<th class="col-xs-4">Number</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-xs-3">
<label class="c-input c-checkbox">
<input type="checkbox" name="domainList" id="goods_100" class="checkboxSelection">
<span class="c-indicator"></span>
</label>
</td>
<td class="col-xs-5">Apple</td>
<td class="col-xs-4"><input type="text" class="form-control" id="number_100" value="1000"></td>
</tr>
<tr>
<td class="col-xs-3">
<label class="c-input c-checkbox">
<input type="checkbox" name="domainList" id="goods_101" class="checkboxSelection">
<span class="c-indicator"></span>
</label>
</td>
<td class="col-xs-5">Pear</td>
<td class="col-xs-4"><input type="text" class="form-control" id="number_101" value="1200"></td>
</tr>
<tr>
<td class="col-xs-3">
<label class="c-input c-checkbox">
<input type="checkbox" name="domainList" id="goods_102" class="checkboxSelection">
<span class="c-indicator"></span>
</label>
</td>
<td class="col-xs-5">Peach</td>
<td class="col-xs-4"><input type="text" class="form-control" id="number_102" value="1500"></td>
</tr>
</tbody>
</table>
<button type="button" id="submit" class="btn btn-primary">Submit</button>
</div>
<script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/tether/1.2.0/js/tether.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>

Each not working on array of elements

I am trying to find all form input elements and iterate through them, unfortunately Each iterator do not work. I have checked the $inputs variable and it has 5 elements in it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Home Page - My ASP.NET MVC Application</title>
<script src="/Scripts/jquery-1.9.1.js"></script>
</head>
<body>
<script>
$(document).on('click', '#test-endpoint', function () {
var $form = $(this).parents('#test-form').first();
var $inputs = $form.find('input, textarea');
$inputs.each(function () {
//The code never executed
});
}
</script>
<form action="http://do.convertapi.com/Word2Pdf" method="post" accept-charset="utf-8" enctype="multipart/form-data" id="test-form">
<input type="button" name="submitButton" id="test-endpoint" value="Submit1">
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Endpoints</h3>
</div>
<div class="panel-body">
POST http://do.convertapi.com/Word2Pdf
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Authentication</h3>
</div>
<div class="panel-body">
<table class="table">
<thead>
<tr>
<th>Parameter</th>
<th>Description</th>
<th>Authentication</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<strong>ApiKey</strong>
<p>Optional</p>
</td>
<td>
<strong>String</strong>
<p>API Key should be passed if you purchased membership with credits. Please login to your control panel to find out your API Key http://www.convertapi.com/a</p>
</td>
<td>
<input type="text" name="ApiKey" placeholder="Optional">
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Parameters</h3>
</div>
<div class="panel-body">
<table class="table">
<thead>
<tr>
<th>Parameter</th>
<th>Description</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<strong>File</strong>
<p>Required</p>
</td>
<td>
<strong>Binary</strong>
<p>Supported source file formats.</p>
</td>
<td>
<input type="file" name="File">
</td>
</tr>
<tr>
<td>
<strong>DocumentTitle</strong>
<p>Optional</p>
</td>
<td>
<strong>String</strong>
<p>Set the title of the generated Pdf file. If value is not set a source document title is used instead.</p>
</td>
<td>
<input type="text" name="DocumentTitle" placeholder="Optional">
</td>
</tr>
<tr>
<td>
<strong>DocumentSubject</strong>
<p>Optional</p>
</td>
<td>
<strong>String</strong>
<p>Set the subject of the generated Pdf file. If value is not set a source document subject is used instead.</p>
</td>
<td>
<input type="text" name="DocumentSubject" placeholder="Optional">
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Output</h3>
</div>
<div id="test-output" class="panel-body">
</div>
</div>
</form>
</body>
</html>
I use jQuery 1.9.1
Try surrounding it with $(document).ready(), like:
$(document).ready( function() {
var $form = $(this).parents('#test-form').first();
var $inputs = $form.find('input, textarea');
$inputs.each(function () {
//The code never executed
});
});
Probably your elements do not exist when you call the .each?
You have a missing )
$(document).on('click', '#test-endpoint', function () {
var $form = $'#test-form');
var $inputs = $form.find('input, textarea');
console.log($inputs.get());
$inputs.each(function () {
console.log(this)
//The code never executed
});
});//missing ) here
Demo: Fiddle
Your code as quoted has a syntax error, I can't see how you would ever see $inputs having anything:
$(document).on('click', '#test-endpoint', function () {
var $form = $(this).parents('#test-form').first();
var $inputs = $form.find('input, textarea');
$inputs.each(function () {
alert("Got: " + this.tagName);
});
} // <================= Missing ); here
Here's your original code live, which doesn't work.
Here's a copy with ); added, which does work.
In your web console, there will be an error:
Uncaught SyntaxError: Unexpected end of input
Here is the full code:
var $form = $(this).parents('#test-form').first();
var $inputs = $form.find('input, textarea');
$inputs.each(function ( idx, value) {
//The code never executed
});

Categories