Building dynamic form parts using jQuery

Question

(Hope this doesn't get duplicated; second attempt at submitting this question)

I'm working on a form in which I'd like to give the user the ability to add an undetermined number of Contacts (Name and Phone Number). I only want to show one row of these form fields to start with, and allow the user to click an element which will add duplicates of the initial row (empty of course and with updated ids for manipulating that data when it gets back to the controller (ASP.NET MVC application).

I've found some examples that work using version 1.2.x of the jQuery library, but I can't seem to get any of them to work with 1.3.2. The issue has to do with the $.clone() method. When I call this method on a selector/element, the page does a full refresh and the user is presented with a clean form.

The current example I've been working with (pulled from http://devblog.jasonhuck.com/assets/infiniteformrows.html) looks like:

The table -

<table id="tabdata">
   <thead>
    <tr>
     <th>Row</th>
     <th>Cell 1</th>
     <th>Cell 2</th>
     <th>Cell 3</th>

     <th></th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td><a id="addnew" href="">Add</a></td>
     <td><input id="n0_1" name="n0_1" type="text" /></td>
     <td><input id="n0_2" name="n0_2" type="text" /></td>

     <td><input id="n0_3" name="n0_3" type="text" /></td>
     <td></td>
    </tr>
   </tbody>
  </table>

The script -

<script type="text/javascript">
    $(function() {
        var newRowNum = 0;

        $('#addnew').click(function() {
            newRowNum++;
            var addRow = $(this).parent().parent();
            var newRow = addRow.clone();
            $('input', addRow).val('');
            $('td:first-child', newRow).html(newRowNum);
            $('td:last-child', newRow).html('<a href="" class="remove">Remove<\/a>');
            $('input', newRow).each(function(i) {
                var newID = newRowNum + '_' + i;
                $(this).attr('id', newID).attr('name', newID);
            });
            addRow.before(newRow);

            $('a.remove', newRow).click(function() {
                $(this).parent().parent().remove();
                return false;
            });

            return false;
        });
    });
 </script>

When the method states "var newRow = addRow.clone();", the page reloads. No clue as to why, but running the script against the earlier jQuery release, it works just fine. I'd prefer not to drop back in versions if I can help it.

Any thoughts? Is there a better way to go about this? It should be pretty simple, but is proving to be more tedious than I want it to be with the library I've chosen.

Answer 1

Here is an example of your code. It is working fine for me in Firefox 3 and also in IE 7. The code is using jQuery 1.3.2. If you want to edit the code, just add /edit to the URL.

A couple of ideas -

• What browser are you viewing the code in that's not working?
• Do you have any other JavaScript libraries that you are using that may be causing conflicts?