Using JQuery to add or remove form elements

Question

I have been trying to get a function working with JQuery to add or subtract form input fields. I have been using an example I found as a starting point.

Here is what I have so far:

<script type="text/javascript">
     $(function(){
      // start a counter for new row IDs
      // by setting it to the number
      // of existing rows
      var newRowNum = 2;

      // bind a click event to the "Add" link
      $('#addnew').click(function(){
       // increment the counter
       newRowNum += 1;

       // get the entire "Add" row --
       // "this" refers to the clicked element
       // and "parent" moves the selection up
       // to the parent node in the DOM
       var addRow = $(this).parent().parent();

       // copy the entire row from the DOM
       // with "clone"
       var newRow = addRow.clone();

       // set the values of the inputs
       // in the "Add" row to empty strings
       $('input', addRow).val('');
       $('name', addRow).val('os' + newRowNum);

       // replace the HTML for the "Add" link 
       // with the new row number
       $('td:first-child', newRow).html('<input type="hidden" name="on' + newRowNum + 'value="Email Address ' + newRowNum + '>Recipient');

       // insert a remove link in the last cell
       $('td:last-child', newRow).html('<a href="" class="remove">Remove<\/a>');

       // loop through the inputs in the new row
       // and update the ID and name attributes
       $('input', newRow).each(function(i){
        var newID = 'os' + newRowNum;
        $(this).attr('id',newID).attr('name',newID);
       });

       // insert the new row into the table
       // "before" the Add row
       addRow.before(newRow);

       // add the remove function to the new row
       $('a.remove', newRow).click(function(){
        $(this).parent().parent().remove();
        return false;    
       });

       // prevent the default click
       return false;
      });
     });
     </script>

The html is as follows:

<table>
<tr><td>
  Email Addresses</td><td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
  <td><input type="hidden" name="on2" value="Email Address 1"><a id="addnew" href="">Add</a></td><td><input name="os2" type="text" id="os2" value="" size="24" maxlength="60" /></td>
  <td>&nbsp;</td>
</tr>
</table>

What I am confused about is why, when I look at the page in the browser, I see the extra input fields, but when I look at the source, the code for the extra fields are nowhere to be found.

Can someone enlighten me on this?

Dave

Answer 1

What I am confused about is why, when I look at the page in the browser, I see the extra input fields, but when I look at the source, the code for the extra fields are nowhere to be found.

That is becausethe browser shows you only the DOM as when the page is loaded.

You need Firebug or Webdeveloper Toolbar (both Firefox Add-ons), and then you can see what jQuery did to modify your DOM.

Edit: there is also a Webdeveloper Toolbar for Internet Explorer.

Answer 2

Those elements are dynamicly created, and therefore, are not found in the sourcecode. It's not that the sourcecode automaticly gets updated when you change it via javascript.

An firefox extension called Web developers toolbar has an option "View generated source" which shows you the source including dynamicly created elements.

Answer 3

Depending on where you are looking at the source, it won't be there. Such as in IE. It will only report the page as it was before any javascript modified it.

Get firebug for firefox. It will let you see everything.

Answer 4

when i click the add link the existing input field does not retain the information it holds and so is useless.

how do i tell it to keep the information in the field after the click event.