Return to Answer

<fieldset id="timesheet-rows">
 <legend>Add Entries</legend>
 <div class="timesheet-row">
 <label>Project:
 <select name="project[]" required>
 <option value="" />
 </select>
 </label>
 <label>Department:
 <select name="department[]" required>
 <option value="" />
 </select>
 </label>
 <label>Task: 
 <select name="task[]" required>
 <option value="" />
 </select>
 </label>
 <label>Hours:
 <input type="number" step="0.25" name="hours[]" width="1" placeholder="2.0" required />
 </label>
 <label>Comment:
 <input type="text" name="comment[]" width="50" />
 </label>
 </div>
 <input type="button" id="add-row" name="add-row" value="Add row" />
</fieldset>​

<fieldset id="timesheet-rows">
 <legend>Add Entries</legend>
 <div class="timesheet-row">
 <label>Project:
 <select name="project[]" required>
 <option value=""></option>
 </select>
 </label>
 <label>Department:
 <select name="department[]" required>
 <option value=""></option>
 </select>
 </label>
 <label>Task: 
 <select name="task[]" required>
 <option value=""></option>
 </select>
 </label>
 <label>Hours:
 <input type="number" step="0.25" name="hours[]" width="1" placeholder="2.0" required />
 </label>
 <label>Comment:
 <input type="text" name="comment[]" width="50" />
 </label>
 </div>
 <input type="button" id="add-row" name="add-row" value="Add row" />
</fieldset>​

Most of this code is due to the fact that you're increasing the numbers in your attributes. I think that's a mistake. Your rows should all have identical name attributes, stored in an array (e.g. name="task[]").

The only problem would then be the identical IDs. Frankly, you shouldn't be using IDs in the first place. The only advantage of using IDs in this case is to associate the labels to the form fields (so that clicking the label focuses the form field. This could easily be accomplished by wrapping the form elements in the label.

So, to summarize, here are some points to consider:

1. Get rid of the IDs
2. Wrap the labels around the form elements to associate them with one another
3. Get rid of the numbers from the names
4. Use array like notation (e.g. name="task[]") for your names

Once you've incorporated all this, you can simply clone the row when needed.

HTML:

<fieldset id="timesheet-rows">
 <legend>Add Entries</legend>
 <div class="timesheet-row">
 <label>Project:
 <select name="project[]" required>
 <option value="" />
 </select>
 </label>
 <label>Department:
 <select name="department[]" required>
 <option value="" />
 </select>
 </label>
 <label>Task: 
 <select name="task[]" required>
 <option value="" />
 </select>
 </label>
 <label>Hours:
 <input type="number" step="0.25" name="hours[]" width="1" placeholder="2.0" required />
 </label>
 <label>Comment:
 <input type="text" name="comment[]" width="50" />
 </label>
 </div>
 <input type="button" id="add-row" name="add-row" value="Add row" />
</fieldset>​

Javascript:

jQuery(function($) {
 var $button = $('#add-row'),
 $row = $('.timesheet-row').clone();
 
 $button.click(function() {
 $row.clone().insertBefore( $button );
 });
});​

Here's the fiddle: http://jsfiddle.net/wd5y9/

Most of this code is due to the fact that you're increasing the numbers in your attributes. I think that's a mistake. Your rows should all have identical name attributes, stored in an array (e.g. name="task[]").

The only problem would then be the identical IDs. Frankly, you shouldn't be using IDs in the first place. The only advantage of using IDs in this case is to associate the labels to the form fields (so that clicking the label focuses on the form field). This could easily be accomplished by wrapping the label around the form element.

So, to summarize, here are some points to consider:

1. Get rid of the IDs
2. Wrap the labels around the form elements to associate them with one another
3. Get rid of the numbers from the names
4. Use array like notation (e.g. name="task[]") for your names

Once you've incorporated all this, you can simply clone the row when needed.

HTML:

<fieldset id="timesheet-rows">
 <legend>Add Entries</legend>
 <div class="timesheet-row">
 <label>Project:
 <select name="project[]" required>
 <option value="" />
 </select>
 </label>
 <label>Department:
 <select name="department[]" required>
 <option value="" />
 </select>
 </label>
 <label>Task: 
 <select name="task[]" required>
 <option value="" />
 </select>
 </label>
 <label>Hours:
 <input type="number" step="0.25" name="hours[]" width="1" placeholder="2.0" required />
 </label>
 <label>Comment:
 <input type="text" name="comment[]" width="50" />
 </label>
 </div>
 <input type="button" id="add-row" name="add-row" value="Add row" />
</fieldset>​

Javascript:

jQuery(function($) {
 var $button = $('#add-row'),
 $row = $('.timesheet-row').clone();
 
 $button.click(function() {
 $row.clone().insertBefore( $button );
 });
});​

Here's the fiddle: http://jsfiddle.net/wd5y9/

Most of this code is due to the fact that you're increasing the numbers in your attributes. I think that's a mistake. Your rows should all have identical name attributes, stored in an array (e.g. name="task[]").

The only problem would then be the identical IDs. Frankly, you shouldn't be using IDs in the first place. The only advantage of using IDs in this case is to associate the labels to the form fields (so that clicking the label focuses the form field. This could easily be accomplished by wrapping the form elements in the label.

So, to summarize, here are some points to consider:

1. Get rid of the IDs
2. Wrap the labels around the form elements to associate them with one another
3. Get rid of the numbers from the name's
4. Use array like notation (e.g. name="task[]") for your names

Once you're incorporated all this, you can simply clone the row when needed.

HTML:

<fieldset id="timesheet-rows">
 <legend>Add Entries</legend>
 <div class="timesheet-row">
 <label>Project:
 <select name="project[]" required>
 <option value="" />
 </select>
 </label>
 <label>Department:
 <select name="department[]" required>
 <option value="" />
 </select>
 </label>
 <label>Task: 
 <select name="task[]" required>
 <option value="" />
 </select>
 </label>
 <label>Hours:
 <input type="number" step="0.25" name="hours[]" width="1" placeholder="2.0" required />
 </label>
 <label>Comment:
 <input type="text" name="comment[]" width="50" />
 </label>
 </div>
 <input type="button" id="add-row" name="add-row" value="Add row" />
</fieldset>​

Javascript:

jQuery(function($) {
 var $button = $('#add-row'),
 $row = $('.timesheet-row').clone();
 
 $button.click(function() {
 $row.clone().insertBefore( $button );
 });
});​

Here's the fiddle: http://jsfiddle.net/wd5y9/

Most of this code is due to the fact that you're increasing the numbers in your attributes. I think that's a mistake. Your rows should all have identical name attributes, stored in an array (e.g. name="task[]").

The only problem would then be the identical IDs. Frankly, you shouldn't be using IDs in the first place. The only advantage of using IDs in this case is to associate the labels to the form fields (so that clicking the label focuses the form field. This could easily be accomplished by wrapping the form elements in the label.

So, to summarize, here are some points to consider:

1. Get rid of the IDs
2. Wrap the labels around the form elements to associate them with one another
3. Get rid of the numbers from the names
4. Use array like notation (e.g. name="task[]") for your names

Once you've incorporated all this, you can simply clone the row when needed.

HTML:

<fieldset id="timesheet-rows">
 <legend>Add Entries</legend>
 <div class="timesheet-row">
 <label>Project:
 <select name="project[]" required>
 <option value="" />
 </select>
 </label>
 <label>Department:
 <select name="department[]" required>
 <option value="" />
 </select>
 </label>
 <label>Task: 
 <select name="task[]" required>
 <option value="" />
 </select>
 </label>
 <label>Hours:
 <input type="number" step="0.25" name="hours[]" width="1" placeholder="2.0" required />
 </label>
 <label>Comment:
 <input type="text" name="comment[]" width="50" />
 </label>
 </div>
 <input type="button" id="add-row" name="add-row" value="Add row" />
</fieldset>​

Javascript:

jQuery(function($) {
 var $button = $('#add-row'),
 $row = $('.timesheet-row').clone();
 
 $button.click(function() {
 $row.clone().insertBefore( $button );
 });
});​

Here's the fiddle: http://jsfiddle.net/wd5y9/