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>
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
}
}
}
?>
i want to make form as many as input text, i'm strugling to make a new form into the new div. if input is 3 then make 3 form, if input is 2 then input is just 2.
<input type="text" id="CountForm">
<form name="regis" id="regis" method="post" action="">
<input id="name1" name="name1" />
<input id="email1" name="email1" />
<input id="phone1" name="phone1" />
</form>
Is it this ?
var add = document.getElementById('button');
add.addEventListener('click', function(){
var num = parseInt(document.getElementById('CountForm').value);
var wrapper = document.querySelector('.wrapper');
wrapper.innerHTML = '';
for(var i =1; i<= num; i++){
var form =
`<form name="regis" id="regis${i}" method="post" action="">
<input id="name1" name="name1" />
<input id="email1" name="email1" />
<input id="phone1" name="phone1" />
</form>`
wrapper.innerHTML = wrapper.innerHTML + form;
}
})
<input type="text" id="CountForm" placeholder = "Enter form number">
<input type=button id = "button" value = "add">
<div class = "wrapper">
</div>
You can do like this as below
$(document).ready(function(){
var counter = 2;
$("#addButton").click(function () {
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="" >');
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);
});
});
div{
padding:8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<title>jQuery add textbox example</title>
<body>
<h1>jQuery add textbox example</h1>
<body>
<form name="regis" id="regis" method="post" action="">
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Textbox #1 : </label><input type='textbox' id='textbox1' >
</div>
</div>
<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Get TextBox Value' id='getButtonValue'>
</form>
</body>
You may Try For this:
var add = document.getElementById('button');
add.addEventListener('click', function(){
var num = parseInt(document.getElementById('CountForm').value);
var wrapper = document.querySelector('.wrapper');
wrapper.innerHTML = '';
for(var i =1; i<= num; i++){
var form =
`<form name="regis" id="regis${i}" method="post" action="">
<input id="name1" name="name1" placeholder="please enter name"/>
<input id="email1" name="email1" placeholder="please enter email" />
<input id="phone1" name="phone1" placeholder="please enter phone"/>
<input type="button" id="button12" name="button12" value="submit"/>
</form>`
wrapper.innerHTML = wrapper.innerHTML + form;
}
})
<input type="text" id="CountForm" placeholder = "Enter form number">
<input type=button id = "button" value = "add">
<div class = "wrapper">
</div>
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:
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
})
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;