This question already has answers here:
How can I apply a jQuery function to all elements with the same ID?
(4 answers)
Closed 6 years ago.
script:
$(document).ready(function() {
var counter = 2;
$("#addButton").click(function() {
if (counter < 2) {
alert("Add more textbox");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Textbox #' + counter + ' : </label>' +
'<input type="text" name="textbox' + counter +
'" id="textbox' + counter + '" value="" >' +
'<input type="button" name="button' + counter +
'" id="removeButton' + counter + '" value="Remove Button">');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function() {
$("#TextBoxDiv" + counter).remove();
if (counter == 2) {
alert("No more textbox to remove");
return false;
}
});
});
</script>
HTML:
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Textbox #1 : </label>
<input type='textbox' id='textbox1'>
<input type='button' value='Remove Button' id='removeButton'>
</div>
</div>
<input type='button' value='Add Button' id='addButton'>
i need to make the delete button to be functional. when i pressed the corresponding button on the side only the textbox beside it will only remove.
You have missed a few basic things.
Here is a likely solution:
$(document).ready(function() {
var counter = 2;
$("#addButton").click(function() {
if (counter < 2) {
alert("Add more textbox");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter).attr("class", 'TextBoxDiv');
newTextBoxDiv.after().html('<label>Textbox #' + counter + ' : </label>' +
'<input type="text" name="textbox' + counter +
'" id="textbox' + counter + '" value="" >' +
'<input type="button" name="button' + counter +
'" class="removeButton" value="Remove Button">');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("body").on("click", ".removeButton", function() {
if (counter <= 2) {
alert("No more textbox to remove");
return false;
}
$(this).closest('.TextBoxDiv').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Textbox #1 : </label>
<input type='textbox' id='textbox1'>
<input type='button' value='Remove Button' class='removeButton'>
</div>
</div>
<input type='button' value='Add Button' id='addButton'>
As you are new here, please don't forget to accept an answer if that works.
Please try this code,i hope this will helps you
$(document).ready(function() {
var counter = 2;
$("#addButton").click(function() {
if (counter < 2) {
alert("Add more textbox");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Textbox #' + counter + ' : </label>' +
'<input type="text" name="textbox' + counter +
'" id="textbox' + counter + '" value="" >' +
'<input type="button" class="remove" name="button' + counter +
'" id="removeButton' + counter + '" value="Remove Button" onclick="remove(this)">');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
});
function remove(obj)
{
var id =$(obj).attr('id');
var counter =id.replace(/[^0-9]/g, '');
$("#TextBoxDiv" + counter).remove();
if (counter == 2) {
alert("No more textbox to remove");
return false;
}
}
And this is html code
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Textbox #1 : </label>
<input type='textbox' id='textbox1'>
<input type='button' class="remove" value='Remove Button' onclick="remove(this)" id='removeButton1'>
</div>
</div>
<input type='button' value='Add Button' id='addButton'>
Related
I want to calculate sum of all totals in the below js fiddle, using the following code: http://jsfiddle.net/hEByw/7/
For reference i given the screenshot below. The total calculates the according to the qty*price dynamically. I want to add all totals and display as a grand total. Please anyone can help me regarding this. Thanks in advance
<script type='text/javascript'>
//<![CDATA[
$(window).load(function () {
var counter = 1;
$(document).ready(function () {
//To multiply two textbox values
$('#qty' + counter).keyup(calculate);
$(this).keyup(calculate);
function calculate(e) {
$('#total' + e.target.title).val($('#qty' + e.target.title).val() * $('#rates' + e.target.title).val());
}
$('#btnCalc').click(function () {
alert($('#qty').val());
});
$("#addButton").click(function () {
if (counter > 27) {
alert("Only 27 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Product #' + counter + ' : </label>' +
'<input type="text" size="60" name="product[]" placeholder="Product"\n\
id="product' + counter + '" value="" title = ' + counter + ' > \n\
<label>Quantity #' + counter + ' : </label>' +
'<input type="text" size="2" title = ' + counter + ' name="qty[]" \n\
id="qty' + counter + '" value="" > \n\
<label>Rate #' + counter + ' : </label>' +
'<input type="text" title = ' + counter + ' size="2" name="rates[]"\n\
id="rates' + counter + '" value="" > \n\
<label>Total #' + counter + ' : </label>' +
'<input type="text" title = ' + counter + ' size="3" name="total[]" id="total' + counter + '" value="" class="txt" onchange="calculate();"> ');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function () {
if (counter == 0) {
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
});
});//]]>
</script>
<table>
<tr>
<td><strong>Select the products</strong>
<input type='button' value='Add Products' id='addButton'>
<input type='button' value='Remove Products' id='removeButton'>
</td>
</tr>
</table>
<table>
<tr>
<td>
<div id='TextBoxesGroup'></div>
</td>
</tr>
<tr>
<td>
<input type="hidden" id="countervalue" name="countervalue" style="display:none;">
</td>
</tr>
</table>
Grand Total : <p id="inputSum"></p>
Check this solution
http://jsfiddle.net/mgc2f5xj/
added a function to get total of all items
function getTotal(){
var totals = document.getElementsByName("total[]");
var total = 0;
for (var i=0; i< totals.length; i++){
total+= Number(totals[i].value);
}
document.getElementById("inputSum").innerText = total;
}
In the below jquery file when i click add button it create one text box with one button after i click addbutton it create another textbox with button.......But what i want is when i cllick 1st button it add 2nd button then i click 2 nd button it add 3rd button .....But i doknow how to do ..
$(document).ready(function() {
var counter = 2;
$("#addButton").click(function() {
if (counter > 10) {
alert("Only 10 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Textbox #' + counter + ' : </label>' +
'<input type="text" name="textbox' + counter + '" id="textbox' + counter + '" value="" >' +
' <input type="button" value="Add Button" id="addButton">');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function() {
if (counter == 1) {
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
});
Duplicate IDs are invalid HTML and will nearly always cause issues with scripting. Avoid if at all possible.
The click() binding you're using is called a "direct" binding which will only attach the handler to elements that already exist. It won't get bound to elements created in the future. To do that, you'll have to create a "delegated" binding by using on().
More details: http://api.jquery.com/on/
Your Sample:
$(document).ready(function(){
var counter = 2;
$(document.body).on('click', ".addButton", function(){
if(counter>10){
alert("Only 10 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' +
'<input type="text" name="textbox' + counter + '" id="textbox' + counter + '" value="" >' +
' <input type="button" value="Add Button" class="addButton" id="button' + counter + '">');
newTextBoxDiv.appendTo("#TextBoxesGroup");
$(this).attr( "disabled", "disabled" );
counter++;
});
$(".removeButton").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
$("#button" + (counter - 1)).attr( "disabled", false );
if(counter==2){
$(".addButton").attr( "disabled", false );
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="buttons">
<input class="addButton" type="button" value="Add Button" />
<input class="removeButton" type="button" value="Remove Button" />
</div>
<div id="TextBoxesGroup"></div>
You may try this:
This line $(obj).attr( "disabled", "disabled" ); to
disable clicked button. You can skip.
function createButton(obj){
var $input = $('<input type="button" value="Add Button" onclick="createButton(this);">');
$input.appendTo($("#buttons"));
$(obj).attr( "disabled", "disabled" ); // use it to disable clicked btn
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="buttons">
<input type="button" value="Add Button" onclick="createButton(this);">
</div>
I was stuck to this problem which I was thinking easy,problem is to validate dynamically created textbox value,from first textbox I have write from value 01:00 and to value as 03:00,in the second textbox I have write value as '02:00' to '04:00' so I want to validate this when i will click on the validate button it should restricted it because this value ("02:00"-"04:00") is coming in between ("01:00-03:00"), so it should validated and to validate at other newly created dynamic textboxes
------------------------------------------------------------
|from 01:00 to 03:00
|from 02:00 to 04:00 **restriction**
|from 03:00 to 05:00 right value(validated)
......
....
--------------------------------------------------------------
Here is my code for creating dynamic checkboxes and checks
jQuery add / remove textbox example
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<style type="text/css">
div{
padding:8px;
}
</style>
</head>
<body>
<h1>jQuery add / remove textbox example</h1>
<script type="text/javascript">
$(document).ready(function(){
var counter = 2;
$("#addButton").click(function () {
if(counter>10){
alert("Only 10 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>From'+ counter + ' : </label>' +
'<input type="text" name="textbox' + counter +
'" id="textbox' + counter + '" value="" >'+'<label>To'+ counter + ' : </label>' +
'<input type="text" name="totime' + counter +
'" id="totime' + counter + '" value="" >');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
$("#getButtonValue").click(function () {
var msg = '';
var $textbox='';
for(i=1; i<counter; i++){
msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
alert(msg);
});
$("#validate").click(function () {
msg=$('#textbox' + 1).val();
$textbox1= $('#textbox1').val();
$totime= $('#totime1').val();
$textbox2= $('#textbox2').val();
if($textbox2>=$textbox1&&$textbox2<=$totime)
{
alert("true");
}
else
{
alert("false");
}
});
});
</script>
</head>
<body>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>From : </label><input type='textbox' id='textbox1' > <label>To : </label><input type='textbox' id='totime1' >
</div>
</div>
<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>
<input type='button' value='Get TextBox Value' id='getButtonValue'>
<input type='button' value='Validate' id='validate'>
</body>
</html>
You should try this code
<html>
<head>
<title>jQuery add / remove textbox example</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<style type="text/css">
div{
padding:8px;
}
</style>
</head>
<body>
<h1>jQuery add / remove textbox example</h1>
<script type="text/javascript">
$(document).ready(function () {
var counter = 2;
$("#addButton").click(function () {
if (counter > 10) {
alert("Only 10 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter).attr("class", 'time');
newTextBoxDiv.after().html('<label>From' + counter + ' : </label>' +
'<input type="text" name="textbox' + counter +
'" id="textbox' + counter + '" value="" >' + '<label>To' + counter + ' : </label>' +
'<input type="text" name="totime' + counter +
'" id="totime' + counter + '" value="" >');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function () {
if (counter == 1) {
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
$("#getButtonValue").click(function () {
var msg = '';
var $textbox = '';
for (i = 1; i < counter; i++) {
msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
alert(msg);
});
$("#validate").click(function () {
$i = 1;
$('.time').each(function () {
//alert('i='+$i);
$txtval = $('#TextBoxDiv' + $i).find('#textbox' + $i).val();
val= ($i + 1);
for ($j = val; $j >= 0; $j--)
{
// alert('asdads='+$j);
if ($txtval > $('#TextBoxDiv' + ($i - $j)).find('#textbox' + ($i - $j)).val() && $txtval < $('#TextBoxDiv' + ($i - 1)).find('#totime' + ($i - 1)).val())
{
$('#TextBoxDiv' + $i).find('#textbox' + $i).val("");
alert('restriction');
}
}
$i++;
});
});
});
</script>
</head>
<body>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1" class="time">
<label>From : </label><input type='textbox' id='textbox1' > <label>To : </label><input type='textbox' id='totime1' >
</div>
</div>
<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>
<input type='button' value='Get TextBox Value' id='getButtonValue'>
<input type='button' value='Validate' id='validate'>
</body>
</html>
I am trying to create dynamic textboxes using php & jquery. I want to submit a paper for presentation, each presentation have more than one authors and each author have more than one affiliations. I tried to create dynamic text boxes for authors and their affiliations. I can create authors dynamically up to 10 but affiliations for only 1st author. Anybody please help me to correct this code. Thanks
<html>
<head>
<title>author</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style type="text/css">
div{
padding:8px;
}
</style>
</head>
<body>
<h1>Author</h1>
<script type="text/javascript">
$(document).ready(function(){
var counter = 2;
$("#addAuthor").click(function () {
if(counter>10){
alert("Only 10 authores allow");
return false;
} //addAffiliation
var newauthorDiv = $(document.createElement('div'))
.attr("id", 'authorDiv' + counter);
newauthorDiv.after().html('<label> <b> Author '+ counter + ' </b> </label>' +
'<br><label>Name : </label>' +
'<input type="text" name="author1_name' + counter + '" id="author1_name' + counter + '" value="" >'+
'<div id="AffiliationGroup"><label>Affiliation 1 : </label>' +
'<input type="text" name="author' + counter + 'affiliation' + counter +
'" id="author' + counter + 'affiliation' + counter +'" value="" >' +
'<input type="button" id="addAffiliation" value="+" >' +
'<input type="button" id="removeAffiliation" value="-" >' + '</div>');
newauthorDiv.appendTo("#AuthorGroup");
counter++;
});
$("#removeAuthor").click(function () {
if(counter==1){
alert("No more author to remove");
return false;
}
counter--;
$("#authorDiv" + counter).remove();
});
$("#getButtonValue").click(function () {
var msg = '';
for(i=1; i<counter; i++){
msg += "\n Author " + i + " : " + $('#author' + i).val();
}
alert(msg);
});
});
// Affiliation
$(document).ready(function(){
var counter = 2;
$("#addAffiliation").click(function () {
if(counter>10){
alert("Only 10 Affiliations allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label> Affiliation '+ counter + ' : </label>' +
'<input type="text" name="author1_affiliation' + counter +
'" id="author1_affiliation' + counter + '" value="" >');
newTextBoxDiv.appendTo("#AffiliationGroup");
counter++;
});
$("#removeAffiliation").click(function () {
if(counter==1){
alert("No more Affiliations to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
$("#getButtonValue").click(function () {
var msg = '';
for(i=1; i<counter; i++){
msg += "\n Affiliation " + i + " : " + $('#author1_affiliation' + i).val();
}
alert(msg);
});
});
</script>
</head><body>
<div id='AuthorGroup'>
<label><b>Author 1 </b></label> <br>
<label>Name : </label><input type='author' id='author1_name1' >
<div id='AffiliationGroup'>
<label>Affiliation 1 : </label><input type='textbox' id='author1_affiliation1' >
<input type='button' value='+' id='addAffiliation'>
<input type='button' value='-' id='removeAffiliation'>
<!--<input type='button' value='Get TextBox Value' id='getButtonValue'>-->
</div>
</div>
<input type='button' value='Add Author' id='addAuthor'>
<input type='button' value='Remove Author' id='removeAuthor'>
<!--<input type='button' value='Get author Value' id='getButtonValue'>-->
</body>
</html>
See http://jsfiddle.net/9y3n33jx/
I haven't completed the whole thing but it should give you an idea.
You need to put your original author inside a div.authorDiv. Use class names instead of id for your + - buttons.
<input type='button' value='+' class='addAffiliation'>
<input type='button' value='-' class='removeAffiliation'>
Because those buttons will be dynamically added you need to bind to click event on body for the button class:
$('body').on("click", ".addAffiliation", function () {
(When the button is clicked you need to figure out the number of affiliates inside div by class, i.e. $(this).parent().(".affiliateClass").length)
When the add button is clicked, you need to add the new div to the parent of the clicked button:
newTextBoxDiv.appendTo($(this).closest(".authorDiv"));
You'll have to do the same for the - button. This should get you going in the right ddirection.
I am trying to create mcq question with dynamic id by using jquery. but i got stuck when i am defining a unique id for the option of each question. can somebody help me to find way to create unique id for each mcq option? below is my jquery
<html>
<head>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
var counter = 2;//question
$("#addQuestion").click(function () {
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Q'+ counter + ' : </label>' +
'<input type="text" name="textbox' + counter +
'" id="textbox' + counter + '" value="" >' + '</br>' +
'<label>A. </label>'+
'<input type="text" id="Q'+counter+'choice1">' +
'<input type="button" value="Add Option" id="'+ counter + '">');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeQuestion").click(function () {
if(counter==1){
alert("No question that can be deleted");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
//$("#getButtonValue").click(function () {
// var msg = '';
//for(i=1; i<counter; i++){
// msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
//}
// alert(msg);
//});
});
</script>
</head><body>
here is the html
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Q1 : </label><input type='textbox' id='textbox1' ></br>
<label>A. <input type='text' id='Q1choice1'>
<input type='button' value='Add Option' id='1'>
</div>
</div>
<input type='button' value='Add Question' id='addQuestion'>
<input type='button' value='Remove Question' id='removeQuestion'>
</body>
</html>
You have to define the var counter before document.ready
Does not work:
$(document).ready(function () {
var counter = 2;//question
Works:
var counter = 2;//question
$(document).ready(function () {
EDIT: counter is only global is defined outside $(document).ready
Try append newTextBoxDiv in your code:
.... var newTextBoxDiv = $(document.createElement('div'))...
.attr("id", 'TextBoxDiv' + counter);
$('body').append(newTextBoxDiv);
... newTextBoxDiv.after().html('<label>Q'....
$('body').append(newTextBoxDiv);
try something like this
var counter = $("#TextBoxesGroup div").length;