We Keep Coding

How to add one or more form by a button and remove it by another button by javascript

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
}
}
}
?>

jQuery Add / Remove Textbox [duplicate]

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'>

How to turn a form into 2 arrays [duplicate]

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>

how to validate dynamically created textbox which have the time value

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>

Create dymanic textboxes in button onclick & save data to database

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.