Best IT Recipes

Add rows dynamically using jQuery

I am building a form where I need some additional inputs, what I have basically is:

form example

Every time the user clicks the plus button, a new form input line should be added to the form, how can I do this in jQuery? In addition, is it possible to automatically add a new line when all the lines (or only the last line, if it is easier / faster) are full? Thus, the user does not need to press the plus button.

I apologize for the question, maybe such a simple question, but I'm still very green with jQuery, I could do it with PHP, but I'm sure Javascript / jQuery plays a more appropriate role here.

Thank you in advance!



@Alex:

<!DOCTYPE html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> <script type="text/javascript"> $form = $('#personas'); $rows = $form.find('.person'); $('a#add').click(function() { $rows.find(':first').clone().insertAfter($rows.find(':last')); $justInserted = $rows.find(':last'); $justInserted.hide(); $justInserted.find('input').val(''); // it may copy values from first one $justInserted.slideDown(500); }); </script> </head> <body> <form id="personas" name="personas" method="post" action=""> <table width="300" border="1" cellspacing="0" cellpadding="2"> <tr> <td>Name</td> <td>More?</td> </tr> <tr class="person"> <td><input type="text" name="name[]" id="name[]" /></td> <td><a href="#" id="add">+</a></td> </tr> </table> </form> </body> </html>
+59
javascript jquery html forms
Jan 27 '10 at 6:37
source share
5 answers

This will close you, the add button will be removed from the table so you can think about it ...

 <script type="text/javascript"> $(document).ready(function() { $("#add").click(function() { $('#mytable tbody>tr:last').clone(true).insertAfter('#mytable tbody>tr:last'); return false; }); }); </script>

HTML markup is as follows

  <a id="add">+</a></td> <table id="mytable" width="300" border="1" cellspacing="0" cellpadding="2"> <tbody> <tr> <td>Name</td> </tr> <tr class="person"> <td><input type="text" name="name" id="name" /></td> </tr> </tbody> </table>

EDIT To remove the value of the text field after insertion.

  $('#mytable tbody>tr:last').clone(true).insertAfter('#mytable tbody>tr:last'); $('#mytable tbody>tr:last #name').val(''); return false;

EDIT2 I can not help myself, reset all the drop-down lists in the inserted TR you can do this

 $("#mytable tbody>tr:last").each(function() {this.reset();});

I will leave the rest to you!

+60
Jan 27 '10 at 7:55
source share

In addition to the answers above: you may probably need to change the identifiers in the names / identifiers of the input elements (see note, you should not have numbers in the field names):

 <input name="someStuff.entry[2].fieldOne" id="someStuff_fdf_fieldOne_2" ..>

I did this if some global variable is set to 0 by default:

 var globalNewIndex = 0;

and in the function of adding after cloning and resetting values ​​in a new line:

  var newIndex = globalNewIndex+1; var changeIds = function(i, val) { return val.replace(globalNewIndex,newIndex); } $('#mytable tbody>tr:last input').attr('name', changeIds ).attr('id', changeIds ); globalNewIndex++;
+5
Mar 14 '13 at 17:06
source share

I tried something like this and it works great;

enter image description here

this is the HTML part:

 <table class="dd" width="100%" id="data"> <tr> <td>Year</td> <td>:</td> <td><select name="year1" id="year1" > <option value="2012">2012</option> <option value="2011">2011</option> </select></td> <td>Month</td> <td>:</td> <td width="17%"><select name="month1" id="month1"> <option value="1">January</option> <option value="2">February</option> <option value="3">March</option> <option value="4">April</option> <option value="5">May</option> <option value="6">June</option> <option value="7">July</option> <option value="8">August</option> <option value="9">September</option> <option value="10">October</option> <option value="11">November</option> <option value="12">December</option> </select></td> <td width="7%">Week</td> <td width="3%">:</td> <td width="17%"><select name="week1" id="week1" > <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select></td> <td width="8%">&nbsp;</td> <td colspan="2">&nbsp;</td> </tr> <tr> <td>Actual</td> <td>:</td> <td width="17%"><input name="actual1" id="actual1" type="text" /></td> <td width="7%">Max</td> <td width="3%">:</td> <td><input name="max1" id="max1" type="text" /></td> <td>Target</td> <td>:</td> <td><input name="target1" id="target1" type="text" /></td> </tr>

this is part of javascript;

 <script src="http://code.jquery.com/jquery-latest.js"></script> <script type='text/javascript'> //<![CDATA[ $(document).ready(function() { var currentItem = 1; $('#addnew').click(function(){ currentItem++; $('#items').val(currentItem); var strToAdd = '<tr><td>Year</td><td>:</td><td><select name="year'+currentItem+'" id="year'+currentItem+'" ><option value="2012">2012</option><option value="2011">2011</option></select></td><td>Month</td><td>:</td><td width="17%"><select name="month'+currentItem+'" id="month'+currentItem+'"><option value="1">January</option><option value="2">February</option><option value="3">March</option><option value="4">April</option><option value="5">May</option><option value="6">June</option><option value="7">July</option><option value="8">August</option><option value="9">September</option><option value="10">October</option><option value="11">November</option><option value="12">December</option></select></td><td width="7%">Week</td><td width="3%">:</td><td width="17%"><select name="week'+currentItem+'" id="week'+currentItem+'" ><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select></td><td width="8%"></td><td colspan="2"></td></tr><tr><td>Actual</td><td>:</td><td width="17%"><input name="actual'+currentItem+'" id="actual'+currentItem+'" type="text" /></td><td width="7%">Max</td> <td width="3%">:</td><td><input name="max'+currentItem+'" id ="max'+currentItem+'"type="text" /></td><td>Target</td><td>:</td><td><input name="target'+currentItem+'" id="target'+currentItem+'" type="text" /></td></tr>'; $('#data').append(strToAdd); }); }); //]]> </script>

Finally php submit part:

  for( $i = 1; $i <= $count; $i++ ) { $year = $_POST['year'.$i]; $month = $_POST['month'.$i]; $week = $_POST['week'.$i]; $actual = $_POST['actual'.$i]; $max = $_POST['max'.$i]; $target = $_POST['target'.$i]; $extreme = $_POST['extreme'.$i]; $que = "insert INTO table_name(id,year,month,week,actual,max,target) VALUES ('".$_POST['type']."','".$year."','".$month."','".$week."','".$actual."','".$max."','".$target."')"; mysql_query($que); }

You can find more information through dynamic insertion of table rows

+4
Dec 06
source share

untested. Change:

 $form = $('#my-form'); $rows = $form.find('.person-input-row'); $('button#add-new').click(function() { $rows.find(':first').clone().insertAfter($rows.find(':last')); $justInserted = $rows.find(':last'); $justInserted.hide(); $justInserted.find('input').val(''); // it may copy values from first one $justInserted.slideDown(500); });

This is better than copying innerHTML because you lose all attached events, etc.

+3
Jan 27 '10 at 6:45
source share

Based on other answers, I simplified the situation a bit. Cloning the last element, we get a “add new” button for free (you need to change the class identifier due to cloning), as well as reduce the DOM operations. I had to use filter () instead of find () to get only the last element.

 $('.js-addNew').on('click', function(e) { e.preventDefault(); var $rows = $('.person'), $last = $rows.filter(':last'), $newRow = $last.clone().insertAfter($last); $last.find($('.js-addNew')).remove(); // remove old button $newRow.hide().find('input').val(''); $newRow.slideDown(500); });
0
01 Oct '13 at 6:44
source share


More articles:


All Articles