Hi people, I would like to build a form that the user can duplicate infinitely (or at least a lot) where the forms will automatically increment and then have a code to repeat the same process on each incremented element. Let's say for example it was a checkout basket, and the user could add a limitless combination of colour and quantities, but a script would need to take every form group and perform a calculation to work how much it cost for each combination individually. Something like <form> <input type="text" id="quantity1" /> <select id="colour1"><lots of select options></select> </form> When the user clicks an add button Jquery or similar would instantly create the same elements again with the id values incremented so we get something like: <form> <input type="text" id="quantity1" /> <select id="colour1"><lots of select options></select> <input type="text" id="quantity2" /> <select id="colour2"><lots of select options></select> <input type="text" id="quantity3" /> <select id="colour3"><lots of select options></select> </form> How would I handle the Javascript to calculate the amounts owed. Would I use a for or while loop for example? And how might that be written? I am bit lost on how to syntax something like this correctly. Do the ID's on the form even need to imcrement for example ir could I just use the index feature of the form anyway? Totally lost on this... PS - This is just a theoretical example, no need for a debate on SQL Injection or people screwing with prices. The real use won't have any associated problems. Thanks Ton's!
Hi. Here is an example: http://www.randomsnippets.com/2008/02/21/how-to-dynamically-add-form-elements-via-javascript/
Hi Jan, Thanks for that, the snippet was useful as it gave me a non Jquery method for dynamically incrementing and adding form elements. However the bit which I was unsure of is how to handle those elements, in my example if each select option had a different price and the user could enter a quantity too then I would need a Javascript calculation to handle the maths and work out the total prices, I am assuming either as a for or while loop. I just don't get how to write that part. If you can help me I will happily bob some cash over to you. How would $10 do? Thanks
Hello. Please try this code. Changes are calculated immediately onkeyup action at quantity text input. And onchange at select element. You can add as many rows as you need. Each input in a new row has own id and name. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> </head> <body> <script type="text/javascript"> $(function(){ var template = $('#attendees .attendee:first').clone(), attendeesCount = 1; var addAttendee = function(){ attendeesCount++; var attendee = template.clone().find(':input').each(function(){ var newId = this.id.substring(0, this.id.length-1) + attendeesCount; this.name = this.id = newId; // update id and name (assume the same) }).end() // back to .attendee .attr('id', 'att' + attendeesCount) // update attendee id .appendTo('#attendees'); // add to container //now calculate all together sum(); }; $('.add').click(addAttendee); // attach event }); function sum(){ currentValue=0 $(".attendee").each(function(){ previousSum = parseInt($("#sum").html()); if( isNaN(parseInt($(this).find(".quantity").val())) == false ){ currentValue += parseInt($(this).find(".quantity").val()) * parseInt($(this).find(".color").val()); } }) $("#sum").html((currentValue)); } </script> <form> <b> <p>Sum: <span id="sum">0</span></p> </b> <a href="#" class="add">Add more rows and recalculate automatically</a> <div id="attendees"> <div id="att1" class="attendee"> <fieldset> <p> <input type="text" id="quantity" class="quantity" onkeyup="sum()"/> <select id="color" class="color" onchange="sum()"> <option value="1">color 1 </option> <option value="2">color 2 </option> <option value="3">color 3 </option> <option value="4">color 4 </option> </select> </p> </fieldset> </div> </div> </form> </body> </html> Code (markup):