We Keep Coding

Javascript - Remove an element from dynamic form

I'm currently working on a form that has a "+' button that allows to display dynamically the same form again.
This part is working fine, I got a problem when adding the delete button that allow to remove a part of the form. It deletes everytime the whole dynamically generated form instead of just the "clicked" form that corresponds to the counter of the dynamic form.
Here is my html code
<!-- Div that the content the dynamic form -->
<div id="dynamicInput">
</div>
<!-- Input button that active the script onClick -->
<input type="button" class="add_delivery" value="Ajouter une destination" onClick="addInput('dynamicInput');">
Here is my javascript
var counter = 1; // Count the number of dynamic form generated
var limit = 20; // Limit amount of dynamic form
// Function to add the form
function addInput(divName){
// Check if max limit is reached and display alert
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
// If limit max is not reached create the form element
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "<div class='delivery_booking_container_left_recipient'><a href='javascript:void(newdiv);' class='remove'>×</a><div class='recipient_name_title2'>Destinataire " + (counter + 1) + "</div><input type='text' name='recipient_name' id='recipient_name' class='delivery_field_recipient_name' placeholder=' Destinataire' value='<?php if(isset($recipient_name)) { echo $recipient_name; } ?>'><input type='text' name='recipient_phone' id='recipient_phone' class='delivery_field_recipient_phone' placeholder=' N° de téléphone' value='<?php if(isset($recipient_phone)) { echo $recipient_phone; } ?>'/></div><div id='ocationField2'><input id='autocomplete2' name='recipient_address' class='delivery_field_recipient_address' placeholder=' Adresse' onFocus='geolocate()'' type='text' value='<?php if(isset($recipient_address)) { echo $recipient_address; } ?>'/></div><div id='addresstwo'><input type='text' id='street_number2' name='street_number2' /><input type='text' id='route2' name='street_name2' /><input type='text' id='locality2' name='town_city2' /><input type='text' id='administrative_area_level_12' name='administrative_area_level_12' /><input type='text' id='postal_code2' name='postcode2' /><input type='text' id='country2' name='country2' /></div><textarea name='recipient_more_infos' id='recipient_more_infos' class='delivery_field_sender_more_infos' placeholder=' Informations complémentaires' value='<?php if(isset($recipient_more_infos)) { echo $recipient_more_infos; } ?>'></textarea>";
// Function to remove a dynamic form on click using the <a href='javascript:void(newdiv);' class='remove'>×</a>
$(document).on("click", "a.remove" , function() {
document.getElementById(divName).appendChild(newdiv).remove(newdiv);
// Reset the input to have the right count when adding a new on after deleting
resetaddInput(newdiv);
});
// Add ++ to the counter
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}

You need to add some parent div/p element to use as selector that can select whole newly added form like
<div class="fomesection">
<div class='delivery_booking_container_left_recipient'><a href='javascript:;' class='remove'>×</a>....</textarea>
</div>
now whenever you click on button remove remove the parent div it will work fine..; or if you are using jQuery to remove it can possible easily using code is :
jQuery(document).on('click','.remove',function(){
jQuery(this).parents('.fomesection').remove();
});

2-step dynamical echo of a php in innerHTML

step 1: I have a form where input fields will be generated dynamically by innerHTML.
var d = document.getElementById("d1p_1");
d.innerHTML += "<input class='add' name='field_" + i + "' type='text'>";
step 2: now I would like to echo a php variable of each value to each dynamically generated input field. Something like:
d.innerHTML += "<input class='add' name='field_" + i + "' type='text' value='"<?php echo $field_" + i + "; ?>" + "'>
How can I archieve that?
Thanks in advance.
To give further information:
This is for a form where an user can add fields, depending from how many fields he needs and will be adding. Now it could be that an user adds more fields than he usually needs and enters data somewhere between field_1 and field_280. To catch the field_x where he entered data I need to echo the value of that input field.
$field_1 = value of field_1 if given;
...
$field_280 = value of field_280 if given;
The innerHTML will add the input fields dynamically by a counter for i. So I dont know what input will be given on which field. Thats why I need to generate the PHP echo part dynamical as well. Like:
<?php echo $field_" + i + "; ?>
The whole process:
form -> contains first just one input field (user will make some inputs) -> by clicking a button there will be added further input fields (1 click 1 field and user does not need to fill in data before he can add another fields) -> now imagine that a user will add 3 fields and has given input on first and third input field -> name="field_1" and name="field_3" ->
the name of each input field is generated by i++ -> the value is empty otherwise the form will be posted -> now the user will submit the form.
this means the value to echo would be $field_3 = (isset($_POST['field_3'])) ? $_POST['field_3']; : ''; -> this variable exist for all i so each variable is set in the php part before BUT to catch the right input name="field_i" with $field_i and to echo this match is the problem.
So by clicking submit the page would be reloaded and instead of only just one input field like from before now would be there 2 input fields. first would be name="field_1" and the second would be name="field_3" because user has left out input name="field_2" before. So name="field_3" needs to echo the right value depending from a dynamically generated name="field_"+ i +"what means that when the name tag is generated dynamically the php tag needs also to be generated dynamically to match each other.

i is a JavaScript variable so including it in a php declaration is giving you problems
You may implement your string concatenation out of the php code as follows
<?php
$field_="stavo";
?>
<script type="text/javascript">
var i=10;
var d = document.getElementById("d1p_1");
d.innerHTML+= "<input class='add' name='field_" + i + "' type='text'>";
d.innerHTML += "<input class='add' name='field_" + i + "' type='text' value='<?php echo $field_; ?>"+i+"'>";
</script>
Of course you must be having this in your Html
<div id="d1p_1"></div>

created 4 textboxes in <tr> dynamically through javascript onclick of checkbox. i want to get the values textboxes

Below is the javascript code which creates 4 textbox in 4<td> in a single on the click of checkbox. There are around 20 checkbox if all checkboxes are cliclked 20<tr> each with 4 checkboxes are formed. My question is how to get the values from these textboxes so that it can be inserted in the database.how to multiple insert these values one by one if multiple values are received.
str+="<tr id='unchk"+$(this).val()+"'>";
str+="<td class='tp' >";
str+="<input width='100%' type='type' value='"+$(this).val()+"' readonly />";
str+="</td>";
str+="<td class='tp'>";
str+="<select>";
str+="<option selected='selected' value='1'>Mr</option>";
str+="<option value='2'>Miss</option>";
str+="<option value='3'>Mrs</option>";
str+="</select>";
str+="</td>";
str+="<td class='tp'>";
str+="<input width='100%' id='cname"+$(this).val()+"' type='type' value='' onblur='getval("+$(this).val()+");'/>";
str+="</td>";
str+="<td class='tp' >";
str+="<input width='100%' type='type' value=''/>";
str+="</td>";
str+="<td class='tp' >";
str+="<input width='100%' type='radio' name='primary' onchange='getval("+$(this).val()+");' value=''/>";
str+="</td>";
str+="</tr>";
$('#pass').append(str);
here $('#pass') is the id of the div to which the entire rows are appende

Assign a name to the text boxes being created and if you are using java, then you can get the values by:
request.getParameterValues("name_of_textboxes");
In Javascript, you can get the values by:
var textBoxValues = [];
$("input[name='name_of_textboxes']").each(function(){
textBoxValues.push($(this).val());
});

adding input field dynamically causes problems

I'm working on a html page and I have a problem when adding a new input field to the form. The problem is that, the content of the other input fields is resetted when the new field is added.
The code for adding a new input text is the following:
var TSLOT =
[ "<div id=\"TSLOT_n_\">",
"From: <input type=\"text\" id=\"from_n_\" autocomplete=\"off\">",
"By letter: <input type=\"text\" id=\"letter_n_\" autocomplete=\"off\">",
"To: <input type=\"text\" id=\"to0-_n_\" autocomplete=\"off\">",
"<input type=\"text\" id=\"to1-_n_\" autocomplete=\"off\">",
"<BR></div>" ].join("");
function addSlotTransition() {
document.getElementById( "Delta" ).innerHTML += TSLOT.replace( /_n_/g, Delta_size++ ); }
Am I missing something?

When you use .innerHTML, it creates a new DOM tree from the parsed innerHTML and rewrites it, so everything not present in the HTML is lost. Use a real append:
document.getElementById( "Delta" ).insertAdjacentHTML( 'beforeend', TSLOT.replace( /_n_/g, Delta_size++ ) );
JS Fiddle Demo

Performing Functions on a Dynamically Created Table

I am retrieving 30 bakery items from a mySQL database into a dynamic HTML table using PHP. The data retrieved are Product, Item (Primary Key), Weight, and Price. My code also creates an INPUT box, called Quantity, for each item so that the user can type in how many cases he wants. Below is a segment of the code used to generate the dynamic table:
$i=0;
while ($i < $num) {
$Item=mysql_result($result,$i,"Item");
$Product=mysql_result($result,$i,"Product");
$Weight=mysql_result($result,$i,"Weight");
$BGPrice=mysql_result($result,$i,"BGPrice");
echo "<tr>";
echo "<td>$Product</td>";
echo "<td><INPUT NAME=Item size=5 value=$Item READONLY></td>";
echo "<td><INPUT NAME=Weight size=5 value=$Weight READONLY></td>";
echo "<td><INPUT NAME=Price size=5 value=$BGPrice READONLY></td>";
echo "<td><INPUT NAME=Quantity size=5 value=0 tabindex=$i></td>";
echo "<td><INPUT NAME=ExtPrice size=5 value=0 READONLY></td>";
echo "<td><INPUT NAME=TotalWt size=5 value=0 READONLY></td>";
echo "</tr>";
$i++;
}
I need JavaScript to call a function and calculate the values for Extended Price (ExtPrice) and Total Weight (TotalWt) as soon as the user enters the number of cases he would like to order.
Here's my struggle: there are 30 items in this dynamic table and each item's INPUT NAME is the same. How can I create a function that updates ExtPrice and TotalWt for each individual product?

You could use the $i variable to uniquely identify each input
echo "<td><INPUT NAME=Item id='item$i' size=5 value='$Item' READONLY></td>";
And as a side note use quotes or double quotes to wrap $Item as it may contains spaces, etc..

Your JavaScript should not directly reference each input by name. Instead, obtain a reference to the adjacent cells in the same row.
Assuming you have a submit button that re-calculates the results, here's an example:
document.getElementById("sub").addEventListener("click", function(e) {
var i, row;
var rows = document.getElementsByTagName("tr");
// process each row individually
for (i = 0, row; row = rows[i++];) {
totalsForRow(row);
}
e.preventDefault();
}, false);
// updates the totals for each row
function totalsForRow(tr) {
var j, inp, fields = {};
var inputs = tr.getElementsByTagName("input");
if (!inputs || inputs.length === 0)
return;
// map each input by name
for (j = 0; inp = inputs[j++];) {
fields[inp.name] = inp;
}
// update totals for this row, using the stored ref to the input
fields.TotalWt.value = fields.Weight.value * fields.Quantity.value;
fields.ExtPrice.value = fields.Price.value * fields.Quantity.value;
}
This doesn't do any error checking and could be improved in several ways. It's just meant to illustrate one approach.
See a working example.