This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 6 years ago.
Here i am creating dynamic radio buttons, text area and click events but my click events for add and remove button is not working for the dynamically created button. I tried using on click event of jquery but it is not working as expecte. How to add .on jquery function in my scenario i tried using :
$("#TextBoxesGroup").on("click", ".abc", (function () {
//some script
});
but when i click on the new dynamic add button which i created it is not at all adding another block
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
var counter = 2;
alert(123);
$(".abc").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="" ><br><input type="radio" name="gender' + counter + ' value="male" > Male<input type="radio" name="gender' + counter + ' value="male" > Female<br><textarea id="textbox' + counter + ' rows="4" cols="50"></textarea><input type="button" class="abc" id="addButton' + counter + '" value="Add Button" ><input type="button" id="removeButton' + counter + '" value="Remove Button" >');
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 = '';
for(i=1; i<counter; i++){
msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
alert(msg);
});
});
</script>
</head>
<body>
</head>
<body>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Textbox #1 : </label><input type='textbox' id='textbox1' >
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female<br>
<textarea id="textbox" rows="4" cols="50"></textarea>
<input type='button' class="abc" value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>
<input type='button' value='Get TextBox Value' id='getButtonValue'>
</div>
Use event delegation.
$(".abc").on('click',function(){
//add your script
})
OR
$("immediate_parent_id_or_class").on('click',".abc",function(){
//add your script
})
Related
i want to add one or more form by a button and remove it by another button by javascript. press one time that button create a form again press that ,then it create same form by one button.
and i can able to insert their values into the database.
<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 style="margin-right:5.9%">Nature Of Income ' + ' : </label>' +'<input type="text" name="NatureIncome' +
'" id="textbox' + '" value="" ><br>' + '<br><label style="margin-right:10.2%">Total Amount' + ': </label>'+'<input type="text" name="TotalAmount' +
'" id="textbox' + '" value="" ><br><hr style="border: 1px solid black;">' );
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
});
</script>
$("#add_button").click(function(){
var intial_field = $(this).data("intial");
var content = '<div id="input_'+intial_field+'"><input type="text" name="user_name[]" /><button id="remove_btn" data-remove="'+intial_field+'">X</button></div>';
$("#recurssion_container").append(content);
$(this).data("intial",intial_field+1);
});
$(document).on("click","#remove_btn",function(){
var remove_element = $(this).data("remove");
$("#input_"+remove_element).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="add_button" data-intial="0">+ Add</button>
<form action="index.php" method="post">
<div id="recurssion_container"></div>
<input type="text" name="user_name[]" />
<button type="submit" name="save">Save</button>
</form>
<?php
if(isset($_POST["save"])){
$user_name_array = $_POST["user_name"];
foreach($user_name_array as $user_name){
if($user_name!=""){
#Put your insert query here
#Please refer how to save data to database https://www.w3schools.com/php/php_mysql_insert.asp
}
}
}
?>
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'>
This question already has answers here:
How to get a form input array into a PHP array
(9 answers)
Closed 6 years ago.
I have a simple form with two text boxes: One for peoples "name" and the other for their "surname". On the page you can click and it will add two more text boxes below, also for "name" and "surname".. so basically you could add as many pairs of name and surname as you want.
How do I take all that information and turn it into two arrays, one for "names" and one for "surnames"?
You can see the demo here: http://poostudios.com/jstest2.html
Here's the code:
<html>
<head>
<script type="text/javascript" src="nutrition/jquery-3.1.1.js"></script>
<style type="text/css">
div{
padding:8px;
}
</style>enter code here
</head>
<body>
<form action="results.php" method="get">
<script type="text/javascript">
$(document).ready(function(){
var counter = 2;
$("#addButton").click(function () {
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Name : </label>' +
'<input type="text" name="textbox' + counter +
'" id="textbox' + counter + '" value="" ><label> Surname : </label>' +
'<input type="text" name="textbox' + counter +
'" id="textbox' + counter + '" value="" >');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function () {
counter--;
$("#TextBoxDiv" + counter).remove();
});
});
</script>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Name : </label><input type='textbox' id='textbox1' >
<label>Surname : </label> <input type='textbox' id='textbox2' >
</div>
</div>
<input type='button' value='Add' id='addButton'>
<input type='button' value='Remove' id='removeButton'>
<input type="submit" value="Go">
</form>
</body>
</html>
I was created with two array all name =>names[],all surename =>surenames[] .and click the go button .You will see the console.log .It will shown
And also created the class name with textbox. Beacause class name only adapted with each function.
var names=[];
var surenames=[];
$(document).ready(function(){
var counter = 2;
$("#addButton").click(function () {
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Name : </label>' +
'<input type="text" name="textbox' + counter +
'" id="textbox1" class="textbox1" value="" ><label> Surname : </label>' +
'<input type="text" name="textbox' + counter +
'" id="textbox2" class="textbox2" value="" >');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function () {
counter--;
$("#TextBoxDiv" + counter).remove();
});
$('input[type=submit]').click(function (e){
e.preventDefault();
var names = $('.textbox1').map(function (){
return this.value
}).get();
var surenames = $('.textbox2').map(function (){
return this.value
}).get();
console.log('names='+names);
console.log('surenames='+surenames);
})
});
div{
padding:8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form action="results.php" method="get">
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Name : </label><input type='textbox' class="textbox1" id='textbox1' >
<label>Surname : </label> <input type='textbox' class="textbox2"id='textbox2' >
</div>
</div>
<input type='button' value='Add' id='addButton'>
<input type='button' value='Remove' id='removeButton'>
<input type="submit" value="Go">
</form>
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;