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>
Related
when i make two seprate html than addrow are through an error and get all value null but if i do eveything in one html than everything work fine.. please help me out
can i use onr js file in two html??
if i can use than why its through an error
my index.html code are
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
</head>
<body>
<p>Fname</p>
<br>
<input type="text" id="name">
<p>Lname</p>
<br>
<input type="text" id="Lname">
<p>Age:</p>
<br>
<input type="text" id="age">
<p>Email:</p>
<br>
<input type="text" id="email">
<br>
<br>
<button onclick="add()">submit</button>
<script type="text/javascript" src="add.js"></script>
</body>
</html>
secoand html file are detail.html
<!DOCTYPE html>
<html>
<head>
<title>Info List</title>
<style type="text/css">
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style="width: 100%;" >
<tr>
<th>Fname</th>
<th>Lname</th>
<th>Age</th>
<th>Email</th>
</tr>
<tr>
<td id="one"></td>
<td id="two"></td>
<td id="three"></td>
<td id="four"></td>
</tr>
</table>
<script type="text/javascript" src="add.js"></script>
</body>
</html>
my js file add.js are
function add(){
fname = document.getElementById('name').value
Lname = document.getElementById('Lname').value
age = document.getElementById('age').value
email = document.getElementById('email').value
console.log("helloooo")
redirect()
addRow(fname,Lname,age,email)
}
function redirect(){
window.location.assign("detail.html")
}
function addRow(f,l,a,e){
let fname = document.getElementById('one')
let lname = document.getElementById('two')
let age = document.getElementById('three')
let email = document.getElementById('four')
fname.innerHTML = f;
lname.innerHTML = l;
age.innerHTML = a;
email.innerHTML = e;
}
You could just put all the code in the same html file:
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
</head>
<body>
<p>Fname</p>
<br>
<input type="text" id="name">
<p>Lname</p>
<br>
<input type="text" id="Lname">
<p>Age:</p>
<br>
<input type="text" id="age">
<p>Email:</p>
<br>
<input type="text" id="email">
<br>
<br>
<button onclick="add()">submit</button>
<table style="width: 100%;" >
<tr>
<th>Fname</th>
<th>Lname</th>
<th>Age</th>
<th>Email</th>
</tr>
<tr>
<td id="one"></td>
<td id="two"></td>
<td id="three"></td>
<td id="four"></td>
</tr>
</table>
<script type="text/javascript" src="add.js"></script>
</body>
</html>
But really, I think your best bet would be to look into some modern framework like react.js or Angular - what you can do with only html+vanilla js is a bit limiting.
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.
My Requirement Description :: I am designing a webapp in JAVA which interacts with the DB (MySQL) and registers an employee, updates the employee information, query an employee with employee id and removes a record. In the backend I am using Hibernate framework.
So I should have 4 buttons in my webpage :
Add Employee
Update Employee
Remove Employee
Query Employee
On clicking "Add Employee" it should request the user for some info like employee id, name etc. And other 3 buttons should be on hidden mode.
Same case on clicking other buttons also.
My Problem :: I have designed my Webpage, how ever when I am clicking on any of the button, nothing is getting displayed. I am not sure where is the problem.
I have limited knowledge with JSP and CSS.
Please let me know where I am doing wrong and help me out in this situation
Here is my JSP code :
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Employee Registration</title>
<style type="text/css">
.ui-jqgrid .ui-jqgrid-bdiv {
overflow-y: scroll;
background: #FBFBFB;
max-height: 220px;
}
</style>
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/js/jquery-ui-1.10.3/css/ui-lightness/jquery-ui-1.10.3.custom.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/js/jqGrid/css/ui.jqgrid.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/button.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/design.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/jquery-ui-timepicker-addon.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/jquery.gritter.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/jsn.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/main.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/s1.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/s2.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/style.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/somu.css">
<script type="text/javascript" src="/Employee/WebContent/js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="/Employee/WebContent/js/jquery-ui-1.10.3/js/jquery-ui-1.10.3.custom.js"></script>
<script type="text/javascript" src="/Employee/WebContent/js/jqGrid/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="/Employee/WebContent/js/jqGrid/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
function display_ct() {
var strcount
var x = new Date()
var x1 = x.getHours() + ":" + x.getMinutes() + ":" + x.getSeconds();
document.getElementById("time_div").innerHTML = x1;
tt = display_c();
}
function display_c() {
var refresh = 1000; // Refresh rate in milli seconds
mytime = setTimeout('display_ct()', refresh)
}
function showDiv(element){
var type = element.value;
var effect = 'slide';
var options = {direction: "left"};
var duration = 500;
if (type == 'Employee Registration') {
alert("hi");
$('#id_register').show();
$('#id_update').hide();
$('#id_removal').hide();
$('#id_query').hide();
alert("done");
}
else if (type == 'Employee Update'){
$('#id_register').hide();
$('#id_update').show();
$('#id_removal').hide();
$('#id_query').hide();
}
else if (type == 'Employee Removal'){
$('#id_register').hide();
$('#id_update').hide();
$('#id_removal').show();
$('#id_query').hide();
}
else if (type == 'Employee Query'){
$('#id_register').hide();
$('#id_update').hide();
$('#id_removal').hide();
$('#id_query').show();
}
}
</script>
</head>
<body onload=display_ct();>
<div class="Bitmap">
<img src="Images/online-employee-registration.jpg" style="height: 800px; width: 1355px; position: absolute; z-index: -1;" />
</div>
<table width="1300" class="myTable">
<tr class="Labels">
<td align="center" width="800">
<b><font size="12"><label>Welcome to Employee Portal</label></font></b>
</td>
</tr>
</table>
<table width="1300" class="myTable">
<tr class="Labels">
<td align="right" width="200"><span id="time_div" class="clock2"></span></td>
</tr>
</table>
<center>
<form action="EmployeeRegistration" name="UserDetailsContract" method="post"
enctype="multipart/form-data" id="id_userDetailsContract">
<table>
<tr align="center">
<td>
<input value="Employee Registration"
type="button"
onclick="showDiv(this);" />
<input value="Employee Update"
type="button"
onclick="showDiv(this);" />
<input value="Employee Removal"
type="button"
onclick="showDiv(this);" />
<input value="Employee Query"
type="button"
onclick="showDiv(this);" />
</td>
</tr>
</table>
<div id="id_register" style="display: none">
<table cellpadding="3pt" align="center">
<tbody>
<tr><td width="20%">Name:<td><input type="text" name="name"/></tr>
<tr><td width="20%">Employee ID:<td><input type="text" name="employeeID"/></tr>
<tr><td width="20%">Email ID:<td><input type="text" name="emailID"/></tr>
<tr><td width="20%">Phone:<td><input type="text" name="phone" size="30" /></tr>
<tr><td width="20%">City:<td><input type="text" name="city" size="30" /></tr>
</tbody>
</table>
<input type="submit" value="Register" />
</div>
<div id="id_query" style="display: none">
<table cellpadding="3pt" align="center">
<tbody>
<tr><td width="20%">Employee ID:<td><input type="text" name="employeeID"/></tr>
</tbody>
</table>
<input type="submit" value="Search" />
</div>
<div id="id_update" style="display: none">
<table cellpadding="3pt" align="center">
<tbody>
<tr><td width="20%">Employee ID:<td><input type="text" name="employeeID"/></tr>
</tbody>
</table>
<input type="submit" value="Update" />
</div>
<div id="id_removal" style="display: none">
<table cellpadding="3pt" align="center">
<tbody>
<tr><td width="20%">Employee ID:<td><input type="text" name="employeeID"/></tr>
</tbody>
</table>
<input type="submit" value="Remove" />
</div>
<!-- <p /> -->
</form>
</center>
</body>
</html>
*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);
}
});
};
});
I have a jquery calendar wherein there are js files stored in Calendar folder.When i select the date, the date is inserted into a textbox.It is working fine.But i have another textbox and i want to use the same script and function for that box too.I am new to jquery so help me out with this one.
Here is the scripting :
<head>
<meta charset="utf-8">
<link href="Calendar/jquery-ui.theme.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="Calendar/jquery-ui.js"></script>
<link href="Calendar/jquery-ui.css" rel="stylesheet" />
<script>
$(function () {
$("#datepicker").datepicker();
});
</script>
</head>
<body>
<tr>
<td class="unmaintable1">Registeration starts : </td>
<td class="unmaintable2"><input type="text" id="datepicker"/></td>
<td class="unmaintable3">Registeration ends :
<input type="text" id="datepicker0"/></td>
<td class="unmaintable4"> </td>
</tr>
I know this has something to do with the id but i am not sure how to solve this.Thanks in advance.
$("#datepicker, #datepicker0").datepicker();
Or you could give both elements the same class name and use that:
<input type="text" id="datepicker" class="datepicker"/>
<input type="text" id="datepicker0" class="datepicker"/>
$(".datepicker").datepicker();
Instead of id you can use css class Try this code
<head>
<meta charset="utf-8">
<link href="Calendar/jquery-ui.theme.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="Calendar/jquery-ui.js"></script>
<link href="Calendar/jquery-ui.css" rel="stylesheet" />
<script>
$(function () {
$(".datepicker").datepicker();
});
</script>
</head>
<body>
<tr>
<td class="unmaintable1">Registeration starts : </td>
<td class="unmaintable2"><input type="text" class="datepicker" id="datepicker"/></td>
<td class="unmaintable3">Registeration ends :
<input type="text" class="datepicker" id="datepicker0"/></td>
<td class="unmaintable4"> </td>
</tr>
Assign same css class to both these textboxes and call attach datepicker by using class selector. Example:
<head>
<meta charset="utf-8">
<link href="Calendar/jquery-ui.theme.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="Calendar/jquery-ui.js"></script>
<link href="Calendar/jquery-ui.css" rel="stylesheet" />
<script>
$(function () {
$(".date-picker").datepicker();
});
</script>
</head>
<body>
<tr>
<td class="unmaintable1">Registeration starts : </td>
<td class="unmaintable2"><input class="date-picker" type="text" id="datepicker"/></td>
<td class="unmaintable3">Registeration ends :
<input class="date-picker" type="text" id="datepicker0"/></td>
<td class="unmaintable4"> </td>
</tr>
you can use like if you don't want to use same class for all
$("input[id^=datepicker]").datepicker();
Or
<input type="text" id="datepicker" name="datepicker"/>
<input type="text" id="datepicker0" name="datepicker0"/>
$(function() {
$("input[name^=datepicker]").datepicker();
});