We Keep Coding

Perform operations on a cloned form

I have created a form that contains two drop-down lists, when the user selects an item from the first list, the data for the second is automatically updated. I use jquery to do this and it works perfectly except that when I duplicate the form, the drop-down list N ° 1 of the duplicated form no longer updates the drop-down list N ° 2 so I would like to know how can I perform the same action on a cloned form (update a drop-down list by selecting one entered in another) and save the entries of all the cloned forms in a database.
Cordially!
here is the code i use
<form id="myForm">
<div id="clonedSection1" class="clonedSection">
<select class="form-control" name="productName[]" id="productName" >
<option value="0" selected>Selectionner le produit</option>
<option value="copy">Copie</option>
<option value="scan">Scan</option>
</select>
<select class="form-control" name="productPrice[]" id="quant" disabled>
<option value="pu" selected>P.U</option>
</select>
</div>
<div>
<input type="button" id="btnAdd" value="add another name" />
<input type="button" id="btnDel" value="remove name" />
</div>
<!-- script that allows you to modify the data in a drop-down list when an item is selected in another-->
<script type="text/javascript">
$("#productName").change(function () {
var val = $(this).val();
if (val == "copy") {
$("#quant").html("<option value='25'> 25$ </option>");
} else if (val == "scan") {
$("#quant").html("<option value='50'> 10$ </option>");
}
});
</script>
<!-- script that clones the form-->
<script type="text/javascript">
$(document).ready(function() {
$("#btnAdd").click(function() {
var num = $(".clonedSection").length;
var newNum = new Number(num + 1);
var newSection = $("#clonedSection" + num).clone().attr("id", "clonedSection" + newNum);
newSection.children(":nth-child(5)").children(":first").attr("id", "productName" + newNum).attr("name", "productName[]" + newNum);
newSection.children(":nth-child(6)").children(":first").attr("id", "quant" + newNum).attr("name", "productPrice[]" + newNum);
$(".clonedSection").last().append(newSection)
$("#btnDel").attr("disabled","");
});
$("#btnDel").click(function() {
var num = $(".clonedSection").length; // how many "duplicatable" input fields we currently have
$("#clonedSection" + num).remove(); // remove the last element
// enable the "add" button
$("#btnAdd").attr("disabled","");
// if only one element remains, disable the "remove" button
if (num-1 == 1)
$("#btnDel").attr("disabled","disabled");
});
$("#btnDel").attr("disabled","disabled");
});
</script>

I have written simple and clean code.
Follow below steps:
Don't use ID so you need to use class name instead of id because of ID should be unique.
If appending dynamically element then need to use .on() instead of .change() method.
.cloned-section section should be separate from Add Button.
Each time pick clone element by .cloned-section>div:nth-child(1) this nth-child method.
Set value in input field by onchange .product-name class.
Remove element by onclick .btn-remove class.
When append clone element by append() method then select+input values need to set null so you can see in my jQuesy code and also see commented text.
I hope below snippet will help you lot.
$(document).on('click', '#btnAdd', function(){
// Make clone by clone() method and append REMOVE button for remove section
var cloneElement = $('.cloned-section>div:nth-child(1)').clone();
cloneElement.append('<button type="button" class="btn btn-danger btn-remove"><span aria-hidden="true">×</span></button>');
// Select value set Zero (0)
cloneElement.find('select').val(0);
// Input value set empty
cloneElement.find('input').val('');
$('.cloned-section').append(cloneElement);
});
// On change product name then set price on price field
$(document).on('change', '.product-name', function(){
var getValue = $(this).val();
$(this).parent().find('.product-price').val(getValue+'%');
});
// Click on Remove button and delete product/price section
$(document).on('click', '.btn-remove', function(){
$(this).parent().remove();
});
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<div class="container my-2">
<div class="row">
<div class="col-sm-12">
<form class="form-inline" id="myForm">
<div class="cloned-section w-100">
<div class="w-100 mt-2">
<select class="form-control w-50 product-name" name="productName[]">
<option value="0" selected>Select Product</option>
<option value="25">Copy</option>
<option value="50">Scan</option>
<option value="75">Paste</option>
<option value="100">Cut</option>
</select>
<input class="form-control w-25 product-price text-center" name="productPrice[]" readonly>
</div>
</div>
<div class="w-100 mt-2">
<button type="button" id="btnAdd" class="btn btn-success">Add Another Name</button>
</div>
</form>
</div>
</div>
</div>

There are some minor problems of your code:
Use classname instead of id for DOM elements that going to be cloned.
It is because id is unique. Different elements should not share the
same id. If you clone an element with id, there would be elements
sharing the same id.
Use .on() instead of .change() for elements that generate
dynamically.
I'm not sure if you really want to insert a new "clonedSection"
inside the last "clonedSection". If you are not going to do this and
would like to insert new "clonedSection" right after the last
"clonedSection", use
newSection.insertAfter($(".clonedSection").last());
value of .attr("disabled", <>) should be either true or false, but not "" and disabled
$(document).ready(function() {
//use on() instead of change() for elements that generate dynamically
$("body").on("change", ".productName", function() {
var _this = $(this);
var quant = _this.closest(".clonedSection").find(".quant");
var val = _this.val();
if (val == "copy") {
quant.html("<option value='25'> 25$ </option>");
} else if (val == "scan") {
quant.html("<option value='50'> 10$ </option>");
}
});
$("#btnAdd").click(function() {
var num = $(".clonedSection").length;
var newNum = num + 1;
var newSection = $("#clonedSection" + num).clone().attr("id", "clonedSection" + newNum);
newSection.children(":nth-child(5)").children(":first").attr("id", "productName" + newNum).attr("name", "productName[]" + newNum);
newSection.children(":nth-child(6)").children(":first").attr("id", "quant" + newNum).attr("name", "productPrice[]" + newNum);
newSection.insertAfter($(".clonedSection").last()); //insert right after the last clonedsection
$("#btnDel").attr("disabled", false); //disabled should be either true/false but not ""
});
$("#btnDel").click(function() {
var num = $(".clonedSection").length;
$("#clonedSection" + num).remove();
$("#btnAdd").attr("disabled", false);
if (num - 1 == 1)
$("#btnDel").attr("disabled", true);
});
$("#btnDel").attr("disabled", true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<!--If you are going to clone DOM element, please use classname instead of id-->
<div id="clonedSection1" class="clonedSection">
<select class="form-control productName" name="productName[]">
<option value="0" selected>Selectionner le produit</option>
<option value="copy">Copie</option>
<option value="scan">Scan</option>
</select>
<select class="form-control quant" name="productPrice[]">
<option value="pu" selected>P.U</option>
</select>
</div>
<div>
<input type="button" id="btnAdd" value="add another name" />
<input type="button" id="btnDel" value="remove name" />
</div>
Hope this help :D

How To Store Data of add more textbox in database using AJAX or PHP

i have created one dynamic text box using Jquery/JavaScript. User can click on Add More Button JavaScript will add another input box in which user can enter some data.
Problem :- JavaScript is working fine but I'm unable to get my head around how to store those data in data base. i need help on php or Ajax to pass these user data to database. Below are Parameter which i want to pass
Hotel ID
Cancellation ID
(Dynamic Userdata)++1
Below Are mention my Codes.
JavaScript :-
<script type="text/javascript">
$(document).ready(function() {
$('#btnAdd').click(function() {
var num = $('.clonedInput').length;
var newNum = new Number(num + 1);
var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
<!-- newElem.children(':first').attr('id', 'from' + newNum).attr('name', 'from' + newNum); -->
$('#from1').attr('id', 'from' + newNum).attr('name', 'from' + newNum);
$('#to1').attr('id', 'to' + newNum).attr('name', 'to' + newNum);
$('#rate1').attr('id', 'rate' + newNum).attr('name', 'rate' + newNum);
$('#input' + num).after(newElem);
$('#btnDel').attr('disabled','');
});
$('#btnDel').click(function() {
var num = $('.clonedInput').length;
$('#input' + num).remove();
$('#btnAdd').attr('disabled','');
if (num-1 == 1)
$('#btnDel').attr('disabled','disabled');
});
$('#btnDel').attr('disabled','disabled');
});
$(document).ready(function() {
$('#sub').click(function() {
var from1=$("#from1").val();
var to1=$("#to1").val();
var rate1=$("#rate1").val();
var from2=$("#from2").val();
var to2=$("#to2").val();
var rate2=$("#rate2").val();
var num = $('.clonedInput').length; //number of times clicked
$( "p" ).html( "<b>Single:</b> " + from1+ to1+rate1+ from2+ to2+rate2);
$( "p" ).html("number"+num);
})
});
</script>
HTML CODE :-
<form id="myForm">
<tr id="input1" style="margin-bottom:4px;" class="clonedInput">
<td> <input type="text" name="hotel_id" id="1" /></td>
<td> <input type="text" name="from1" id="from1" /></td>
<td> <input type="text" name="to1" id="to1" /></td>
<td> <input type="text" name="rate1" id="rate1" /></td>
<td><input type="button" id="btnDel" value="remove name" /></td>
</tr>
<tr>
<td> </td>
</tr>
<div>
<tr><td></td><td></td>
<td> <input type="button" id="btnAdd" value="add another name" /> <input type="button" id="sub" value="submit" /></td>
</tr>
</div>
</form>
Please help me with this...

What i would do is,
Start with naming all your custom inputs the same, like "custom1" and then get your javascript to increase the last number by one each time, like "custom2", "custom3", and so on.
Then i would make a loop in my php script checking if empty() on "custom1", and just make that number increase for each time, if then one comes up empty, you have reached the end, meaning you can exit out of the loop. and then you have all your values you can insert where ever you want.
I will try showing you some example code below.
for ($x=1; $x=0; $x++) {
if (!empty($_POST["custom".$x]) {
//The user have this custom field, and type something in it.
} else {
//This is the end of the custom fields.
$x=0;
}
}

JQuery - dynamically selecting inputs with "nth"

I have a question that I've been stuck on. I have a form and want to dynamically be able to call upon the n-th set of input fields in a form to use them in equations that will output the n-th set of answers. For example "footage2" should be plugged into an equation that will give me "postQuantity2" and then "footage3" should be used to determine "postQuantity3". The problem is that the form can add input areas dynamically so I can't just hard code it to do what I want. Any ideas of how to get the nth set of numbers to be used for an equation and then give me the nth set of answers? If anyone can explain how this would work, or just point out how it wouldn't it'd be very much appreciated! Thanks!
Here is a snippet - http://jsfiddle.net/gv0029/QGW7R/ - to give you a basic idea of what I'm working with and here is some html and js.
HTML
<fieldset id="fence">
<div id="inputFence1" class="clonedInputFence">
<fieldset id="fenceDescripton">
<legend><strong>Fence Description</strong>
</legend>
<label>Footage:
<input type="number" id="footage" name="footage" value="" /></label>
<select name="fenceHeight" id="fenceHeight">
<option value="select">Select Fence Height</option>
<option value="6" id="fH6">6 Ft.</option>
<option value="8" id="fH8">8 Ft.</option>
</select>
</fieldset>
<fieldset id="post">
<legend><strong>Post Type</strong>
</legend>
<label>Post Quantity:
<input type="postQuantity" name="postQuantity" id="postQuantity" value="" />
</label>
<select name="postMeasurements" id="postMeasurements">
<option value="select">Select Post Measurements</option>
<option value="23/8 x .065 x 8" id="23/8 x .065 x 8">2 3/8 x .065 x 8</option>
<option value="23/8 x .095 x 8" id="23/8 x .095 x 8">23/8 x .095 x 8</option>
</select>
</fieldset>
</div>
</fieldset>
<div>
<input type="button" id="btnAddFence" value="Add Another Fence" />
<input type="button" id="btnDelFence" value="Remove Fence" />
</div>
JS
//Quantity for Posts
$('#footage, #manualOverrideNo').bind('keypress keydown keyup change', function(){
var footage = parseFloat($(':input[name="footage"]').val(),10);
var total = '';
if(!isNaN(footage)){
total = Math.ceil(footage /7);
$(':input[name="postQuantity"]').val(total.toString());
} else {
$(':input[name="postQuantity"]').val("");
}
});
//Dynamic Fence Input Fields
$('#btnAddFence').click(function() {
var num = $('.clonedInputFence').length; // how many "duplicatable" input fields we currently have
var newNum = new Number(num + 1); // the numeric ID of the new input field being added
// create the new element via clone(), and manipulate it's ID using newNum value
var newElem = $('#inputFence' + num).clone().attr('id', 'inputFence' + newNum);
//Fieldset creation
newElem.find('fieldset').attr('id', 'fence' + newNum);
//Fence Description
newElem.find("select[name=fenceHeight]").attr('id', 'fenceHeight' + newNum).attr('name', 'fenceHeight' + newNum);
newElem.find(':input[name="footage"]').attr('id', 'footage' + newNum).attr('name', 'footage' + newNum);
//Post Type
newElem.find(':input[name="postQuantity"]').attr('id', 'postQuantity' + newNum).attr('name', 'postQuantity' + newNum);
newElem.find("select[name=postMeasurements]").attr('id', 'postMeasurements' + newNum).attr('name', 'postMeasurements' + newNum);
// insert the new element after the last "duplicable" input field
$('#inputFence' + num).after(newElem);
// enable the "remove" button
//$('#btnDel').attr('disabled','');
$('#btnDelFence').removeAttr('disabled');
});
$('#btnDelFence').click(function() {
var num = $('.clonedInputFence').length; // how many "duplicatable" input fields we currently have
$('#inputFence' + num).remove(); // remove the last element
// enable the "add" button
//$('#btnAdd').attr('disabled','');
$('#btnAddFence').removeAttr('disabled');
// if only one element remains, disable the "remove" button
if (num-1 == 1)
$('#btnDelFence').attr('disabled','disabled');
});
$('#btnDelFence').attr('disabled','disabled');

I don't think nth-child will work in this case since there are multiple child elements and the op wants to match them up.
On your footage elements, add a data attribute of, let's say, data-which-pair with a pattern like
id = n data-which-pair = n
$("#footage"+n).click(function(){
var n = $(this).attr("data-which-pair");
Do something cool with $("#postQuantity"+n);
}
You might be able to just do a function(n) but I usually follow this longer-winded approach because it is easier to see what's going on. Keep in mind, obviously, that the above is pseudocode that you will need to adapt.

JQuery - New name based off of old name

I'm building a form that can add extra fieldsets and inputs. I am trying to get the fieldsets and inputs to have an individual ids and names (such as fenceDescription2, fenceDescription3) but I can't figure out how to have the new element (for either the fieldset or the inputs) call on its own name so that it can add a new number to it. I got it to work with just one field but cant get the names to and the newNum correctly when I have multiple fieldsets. Ideally every time you clicked "add new fence" a clone of the elements would pop up underneath, each with a matching newNumber that corresponds to their order in the form (fenceHeight2 with postQuantity2 and postMeasurement2, and then 3 with 3, etc). Any help explaining how this is done would be greatly appreciated! Thanks! Here is a JSFiddle - http://jsfiddle.net/gv0029/3dnNP/1/
HTML :
<fieldset id="fence">
<div id="inputFence1" class="clonedInputFence">
<fieldset id="fenceDescripton">
<legend><strong>Fence Description</strong>
</legend>Fence Description:
<select name="fenceHeight" id="fenceHeight">
<option value="select">Select Fence Height</option>
<option value="6" id="fH6">6 Ft.</option>
<option value="8" id="fH8">8 Ft.</option>
</select>
</fieldset>
<fieldset id="post">
<legend><strong>Post Type</strong>
</legend>
<label>Post Quantity:
<input type="postQuantity" name="postQuantity" id="postQuantity" value="" />
</label>
<select name="postMeasurements" id="postMeasurements">
<option value="select">Select Post Measurements</option>
<option value="23/8 x .065 x 8" id="23/8 x .065 x 8">2 3/8 x .065 x 8</option>
<option value="23/8 x .095 x 8" id="23/8 x .095 x 8">23/8 x .095 x 8</option>
</select>
</fieldset>
</div>
</fieldset>
<div>
<input type="button" id="btnAddFence" value="Add Another Fence" />
<input type="button" id="btnDelFence" value="Remove Fence" />
</div>
JS:
//Dynamic Fence Input Fields
$('#btnAddFence').click(function() {
var num = $('.clonedInputFence').length; // how many "duplicatable" input fields we currently have
var newNum = new Number(num + 1); // the numeric ID of the new input field being added
// create the new element via clone(), and manipulate it's ID using newNum value
var newElem = $('#inputFence' + num).clone().attr('id', 'inputFence' + newNum);
//Fieldset creation
newElem.find('fieldset').attr('id', 'name' + newNum);
//Fence Description
newElem.find($("select[name=fenceHeight]")).attr('id', 'fenceHeight' + newNum).attr('name', 'fenceHeight' + newNum);
//Post Type
newElem.find($(':input[name="postQuantity"]')).attr('id', 'postQuantity' + newNum).attr('name', 'postQuantity' + newNum);
newElem.find($("select[name=postMeasurements]")).attr('id', 'postMeasurements' + newNum).attr('name', 'postMeasurements' + newNum);
// insert the new element after the last "duplicable" input field
$('#inputFence' + num).after(newElem);
// enable the "remove" button
$('#btnDelFence').removeAttr('disabled');
// business rule: you can only add 5 names
//if (newNum == 5)
//$('#btnAdd').attr('disabled','disabled');
});
$('#btnDelFence').click(function() {
var num = $('.clonedInputFence').length; // how many "duplicatable" input fields we currently have
$('#inputFence' + num).remove(); // remove the last element
// enable the "add" button
//$('#btnAdd').attr('disabled','');
$('#btnAddFence').removeAttr('disabled');
// if only one element remains, disable the "remove" button
if (num-1 == 1)
$('#btnDelFence').attr('disabled','disabled');
});
$('#btnDelFence').attr('disabled','disabled');

Cloning form fields using jquery

I am attempting to clone fields in a form using Jquery.
I'm trying to achieve the following in terms of display:
SELECT SELECT TEXT INPUT
RADIO RADIO RADIO
Clone 1
SELECT SELECT TEXT INPUT
RADIO RADIO RADIO
Clone2
SELECT SELECT TEXT INPUT
RADIO RADIO RADIO
What I end up getting is:
RADIO RADIO RADIO
RADIO RADIO RADIO
RADIO RADIO RADIO
SELECT SELECT TEXT INPUT
SELECT SELECT TEXT INPUT
SELECT SELECT TEXT INPUT
In my code below, I have used the .after function to follow the Select options, but it still displays it above
$('#condition' + num).after(newElem);
// insert the new element after the last "duplicatable" input field
$('#logical' + num1).after(newElem);
A demo is on Jsfiddle http://jsfiddle.net/noscirre/ATzBA/
HTML
<table width="100%" cellspacing="4" cellpadding="5" border="0">
<tbody><tr id="logical1" class="clonedInput1">
<td class="first-column"> </td>
<td><input type="radio" name="logicalOperator" default>
AND
<input type="radio" name="logicalOperator" >
OR
<input type="radio" name="logicalOperator" >
NOT
</td>
</tr>
<tr id="condition1" class="clonedInput">
<td class="first-column">Condition #2</td>
<td><span style="float:left; padding-right: 10px;">
<select id="firstname" name="firstname" class="standard_select" style="width:147px; background:#fff;">
<option>Blah Name</option>
<option>Blah list</option>
<option>Blah Type</option>
<option>Blah Id</option>
<option>Blah Name</option>
</select> <select id="firstname" name="firstname" class="standard_select" style="width:147px;">
<option>Equals =</option>
<option>Not Equal <></option>
<option>Greater ></option>
<option>Less <</option>
<option>Contains</option>
<option>In</option>
<option>Not In</option>
</select> <input type="text" id="conValue" name="conValue" class="short_input" value="" style="width:147px;">
</span>
</td>
</tr>
<tr>
<td class="first-column"> </td>
<td>
<div>
<input type="button" id="btnAdd" value="Add" />
<input type="button" id="btnDele" value="Del" />
</div>
</td>
</tr></tbody>
</table>
JAVASCRIPT
​` $('#btnAdd').click(function() {
var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
var num1 = $('.clonedInput1').length; // how many "duplicatable" input fields we currently have
var newNum = new Number(num + 1); // the numeric ID of the new input field being added
var newNum1 = new Number(num1 + 1); // the numeric ID of the new input field being added
// create the new element via clone(), and manipulate it's ID using newNum value
var newElem = $('#condition' + num).clone().attr('id', 'condition' + newNum);
// create the new element via clone(), and manipulate it's ID using newNum value
var newElem1 = $('#logical' + num1).clone().attr('id', 'logical' + newNum1);
// manipulate the name/id values of the input inside the new element
newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
// manipulate the name/id values of the input inside the new element
newElem.children(':first').attr('id', 'name' + newNum1).attr('name', 'name' + newNum1);
// insert the new element after the last "duplicatable" input field
$('#condition' + num).after(newElem);
// insert the new element after the last "duplicatable" input field
$('#logical' + num1).after(newElem1);
// enable the "remove" button
$('#btnDele').attr('disabled','');
// business rule: you can only add 5 names
if (newNum == 5)
$('#btnAdd').attr('disabled','disabled');
// business rule: you can only add 5 names
if (newNum1 == 5)
$('#btnAdd').attr('disabled','disabled');
});
$('#btnDele').click(function() {
var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
var num1 = $('.clonedInput1').length; // how many "duplicatable" input fields we currently have
$('#condition' + num).remove(); // remove the last element
$('#logical' + num).remove(); // remove the last element
// enable the "add" button
$('#btnAdd').attr('disabled','');
// if only one element remains, disable the "remove" button
if (num-1 == 1)
$('#btnDele').attr('disabled','disabled');
if (num1-1 == 1)
$('#btnDele').attr('disabled','disabled');
});
$('#btnDele').attr('disabled','disabled');
​`

The newElem1 is inserted after the logicalxxx item, which is before the last inserted condition item. If you replace
// insert the new element after the last "duplicatable" input field
$('#condition' + num).after(newElem);
// insert the new element after the last "duplicatable" input field
$('#logical' + num1).after(newElem1);
with
$('#condition' + num).after(newElem).after(newElem1);
newelem1 is inserted directly after newelem and I think that gives the desired effect (updated fiddle: http://jsfiddle.net/ATzBA/2/ )