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();
});
Related
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>
Okay, so for some reason I have a crazy problem that is just making my mind go crazy. I have an open source shoutbox, worked great in the website.com/shouot/SHOUTDIREC/chat.html but once I try to embed into my previous built site(website.com/chat.php), the submit button like grays out and I can't submit the post. Another thing is it doesn't show previous post that show up when I go back to SHOUTDIREC/chat.html. I tried changing /chat.php to /chat.html nothing. Still grayed out not working submit button.
This is the ./chat.php:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Making a Shoutbox with PHP and jQuery</title>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/emojione/1.3.0/assets/css/emojione.min.css"/>
<link rel="stylesheet" href="./shout/assets/css/styles.css" />
<script type="text/javascript" src="./livechat/php/app.php?widget-init.js"></script>
</head>
<body>
<div class="shoutbox">
<h1>Shout box <img src='./shout/assets/img/refresh.png'/></h1>
<ul class="shoutbox-content"></ul>
<div class="shoutbox-form">
<h2>Write a message <span>×</span></h2>
<form action="./shout/publish.php" method="post">
<label for="shoutbox-name">nickname </label> <input type="text" id="shoutbox-name" name="name"/>
<label class="shoutbox-comment-label" for="shoutbox-comment">message </label> <textarea id="shoutbox-comment" name="comment" maxlength='240'></textarea>
<input type="submit" value="Shout!"/>
</form>
</div>
</div>
<!-- Include jQuery and the EmojiOne library -->
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://cdn.jsdelivr.net/emojione/1.3.0/lib/js/emojione.min.js"></script>
<script src="./shout/assets/js/script.js"></script>
</body>
</html>
Here is the /SHOUTDIREC/chat.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Wyfi-Chat</title>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/emojione/1.3.0/assets/css/emojione.min.css"/>
<link rel="stylesheet" href="./assets/css/styles.css" />
</head>
<body>
<div class="shoutbox">
<h1>Shout box <img src='./assets/img/refresh.png'/></h1>
<ul class="shoutbox-content"></ul>
<div class="shoutbox-form">
<h2>Write a message <span>×</span></h2>
<form action="./publish.php" method="post">
<label for="shoutbox-name">nickname </label> <input type="text" id="shoutbox-name" name="name"/>
<label class="shoutbox-comment-label" for="shoutbox-comment">message </label> <textarea id="shoutbox-comment" name="comment" maxlength='240'></textarea>
<input type="submit" value="Shout!"/>
</form>
</div>
</div>
<!-- Include jQuery and the EmojiOne library -->
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://cdn.jsdelivr.net/emojione/1.3.0/lib/js/emojione.min.js"></script>
<script src="./assets/js/script.js"></script>
</body>
</html>
I don't know why it's not working. Maybe a permission issue? Or what? I have no clue, and my mind is going absolutely nuts.
function AjaxShowForm(a, v) {
var data = $("#" + v).serialize();
$.ajax({
type: "POST",
url: "https://api.stackexchange.com/2.2/answers/45403161?order=desc&sort=activity&site=stackoverflow",
data: data,
beforeSend: function (html) { // this happens before actual call
$("#" + a).html("<img src='//vistablog.ir/images/loading_.gif'></img>loading..");
$("#" + a).show();
},
success: function (html) { // this happens after we get results
$("#" + a).html("");
$("#" + a).show();
$("#" + a).append(html);
}
});
return false;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action='' method='post' id='form1'>
<table dir='rtl' border='0'>
<tr>
<td>name <span style="color:red">*</span></td>
<td><input type='text' name='in1' required></td>
</tr>
<tr>
<td>description</td>
<td><textarea name='in3'></textarea></td>
</tr>
<tr>
<td>family</td>
<td><input type='text' name='in2'></td>
</tr>
<tr>
<td>email</td>
<td><input type='text' name='in4'></td>
</tr>
<tr>
<td>roles</td>
<td><input type='checkbox' name='in5'></td>
</tr>
<td></td>
<td><input type='submit' value='submit' onclick='return AjaxShowForm("showajax1","form1")'></td>
</table>
<p id='showajax1'></p></form>
</center>
Is there any way I could create a dynamic data picker like the image given below
This is What I have tried. But I want more interactive date picker. Is there any way I could create I given in the Image. This was not as my staff needed. So, I need some good look date picker for my assignment submit
NaCH.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Design Challenge</title>
<!-- Viewport-->
<meta name="viewport" content="width=device-width" />
<!-- Favicons
<link rel="shortcut icon" href="img\favicon.png" type="image/x-icon"> -->
<!-- Bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="js/date.js"></script>
<!-- Custom CSS-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section id="block2">
<div class="container">
<div class="well"></div>
</div>
</section>
<section id="nach">
<div class="container2" style="margin-top:40px">
<div class="col-md-8 col-md-offset-2">
<table class="table">
<tr class="header">
<td style="padding-left:25px;">Show</td>
<td>
<select>
<option value="" style="display:none;"></option>
<option value="0">KYC <span>COMPLETED</span></option>
<option value="1">MANDATE <span>SENT</span></option>
<option value="2">MANDATE <span>RECEIVED</span></option>
</select>
</td>
</tr>
<tr class="body">
<td >Sl.no</td>
<td style="text-align:left;">Customers</td>
<td>KYC COMPLETED</td>
<td>MANDATE SEND</td>
<td>CLEARED</td>
<td>DISAPPROVED</td>
</tr>
<tr id="calenderdate">
<td>01</td>
<td style="text-align:left;">Ellen <span>De generes</span></td>
<td><input type="text" is-datepicker="1" disabled placeholder="01/02/2016">
<img class="checked" src="img/success.png" width="10px" height="10px">
</td>
<td ><input type="text" is-datepicker="1" disabled placeholder="01/02/2016">
<img class="checked" src="img/success.png" width="10px" height="10px">
</td>
<td class="tick2"><input type="text" id = "datepicker" disabled placeholder="01/02/2016"></td>
<td class="wrong"><input type="text" id = "datepicker" disabled placeholder="01/02/2016"></td>
</tr>
<tr id="calenderdate">
<td>02</td>
<td style="text-align:left;">De generes</td>
<td><input type="text" is-datepicker="1" disabled placeholder="01/02/2016">
<img class="checked" src="img/success.png" width="10px" height="10px">
</td>
<td><input type="text" is-datepicker="1" placeholder="01/02/2016">
<img class="checked" src="img/gear.png" width="10px" height="10px">
</td>
<td class="tick3"><input type = "text" id = "datepicker" disabled placeholder="dd mm yy"></td>
<td class="wrong3"><input type = "text" id = "datepicker" disabled placeholder="dd mm yy"></td>
</tr>
</table>
</div>
</div>
</section>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</body>
</html>
<input type="text" is-datepicker="1" />
<input type="text" is-datepicker="1" />
<input type="text" is-datepicker="1" />
<input type="text" is-datepicker="1" />
$(function() {
$("[is-datepicker=1]").each(function() {
$(this).datepicker({
showOn:"button",
buttonImage: "img/calendar.png",
buttonImageOnly: true
});
});
});
Here, we're giving an attribute for the inputs is-datepicker and telling the JS code to apply the datepicker function to each of these fields.
Use different id's like datepicker1, datepicker2 for multiple date
$( "#datepicker1" ).datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
});
$( "#datepicker2" ).datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
});
Or use foreach as suggested by Roc Khalil
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>
I need to have a button which will add a new text and input each time after the button is clicked.
Desired output after the button is clicked once.
But given my following codes, my new input will override the initial input.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Table</title>
</head>
<body>
<table>
<tbody>
<tr>
<td>Input
<input type="text" class="form-control" readonly="readonly">
</td>
</tr>
</tbody>
</table>
<div class="form-group row" style="padding-top: 10px">
<div class="col-md-1 text-center">
<button id="addnewinputbtn" name="button" class="btn btn-default">Add New Input</button>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#addnewinputbtn').click(function() {
$('tr').appendTo('tbody')
.html(
'<td>New Input <input type="text" class="form-control" readonly="readonly"></td>');
});
});
</script>
</body>
</html>
this code
$('tr').appendTo('tbody').html(
'<td>New Input <input type="text" class="form-control" readonly="readonly"></td>');
});
.html() on tr will replace the html of tr element with the new input td element , you should append the new input td element in the tr element.
Edited: This code will replace the html of the tr element in the DOM since the selector $('tr') will select the tr element present in the DOM.
$('tr').appendTo('tbody')
.html(
'<td>New Input <input type="text" class="form-control" readonly="readonly"></td>');
});
but if you wan to create a new tr element, the code should be
$('').appendTo('tbody')
.html(
'New Input ');
});
$('') will create a new element.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Table</title>
</head>
<body>
<table>
<tbody>
<tr>
<td>Input
<input type="text" class="form-control" readonly="readonly">
</td>
</tr>
</tbody>
</table>
<div class="form-group row" style="padding-top: 10px">
<div class="col-md-1 text-center">
<button id="addnewinputbtn" name="button" class="btn btn-default">Add New Input</button>
</div>
</div>
<script type="text/javascript">
$(document)
.ready(
function() {
$('#addnewinputbtn')
.click(
function() {
$('<tr>').appendTo('tbody').html(
'<td>New Input <input type="text" class="form-control" readonly="readonly"></td>');
});
});
</script>
</body>
</html>
Try doing appending it do the tr instead like so:
$('tr').append(...);
That will append a new element nested in the tr tag instead of appending a new element to the body thus overriding itself
You can use Jquery append to add another element.
function AddTextBox(){
$("#populateInput").append('<input type="text" class="customControl"/>')
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="AddTextBox()">Add Input</button>
<div id="populateInput">
</div>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Table</title>
</head>
<body>
<table>
<tbody>
<tr>
<td>Input
<input type="text" class="form-control" readonly="readonly">
</td>
</tr>
</tbody>
</table>
<div class="form-group row" style="padding-top: 10px">
<div class="col-md-1 text-center">
<button id="addnewinputbtn" name="button" class="btn btn-default">Add New Input</button>
</div>
</div>
<script type="text/javascript">
$(document)
.ready(
function() {
$('#addnewinputbtn')
.click(
function() {
$('tbody')
.append(
'<tr><td>New Input <input type="text" class="form-control" readonly="readonly"></td></tr>');
});
});
</script>
</body>
</html>