Add Extra Text Input fields

[jacobjacobjacob]

Hi,

I been pretty much given the job of doing the backend of our company's website because the web guy was a victim of downsizing.  So far I've got the results of our registration form being packaging in .xml and being sent to an email address using php.  Now I need to be able to click a button and add extra product/serial number text fields.  Please have a look below and lend a hand if you can.

This is the javascript...I think I am having a problem with "var newField = newFields.childNodes".  As it is the new fields are appearing but they are lacking the "counter" value appended to their names.
[code]var counter = 0;

function moreFields() {
counter++;
var newFields = document.getElementById('workplease').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField[i].name
if (theName)
newField[i].name = theName + counter;
}
var insertHere = document.getElementById('overhere');
insertHere.parentNode.insertBefore(newFields,insertHere);
}[/code]

HTML
[code]
  <div id="workplease" style="display:none">
  <div align="left"><a style="font-size:xx-small" onclick="parentNode.parentNode.parentNode.removeChild(parentNode.parentNode);" >Remove Product</a></div>
  <table style="padding-bottom: 5px" width="600" border="0" cellpadding="1" cellspacing="1" class="body">
  <tr>
                    <td width="310" height="24" valign="top"> <div align="left">Product/Model
                    </div></td>
                    <td width="11" valign="top"><div align="left"><font color="#FF0000">*</font></div></td>
                    <td width="13">&nbsp;</td>
                    <td width="253" valign="top"> <label> </label>                      <div align="left">
                        <label></label>
                        <select name="ProductModel" size="1" id="ProductModel">
                          <option value="1">1</option>
                          <option value="1">1;</option>
                          <option>1</option>
                          <option>1</option>
                          <option>1</option>
                          <option>1</option>
                          <option>1</option>
                          <option>1</option>
                          <option>1</option>
                          <option>1</option>
                          <option>1</option>
                          <option>1</option>
                          <option>1</option>
                          <option>1</option>
                          <option>1</option>
                          <option>1</option>
                          <option>1</option>
                          <option>1</option>
  <option>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
                        </select>
                      </div></td>
                  </tr>
                  <tr>
                    <td height="24" valign="top"><div align="left">Serial Number </div></td>
                    <td valign="top"><div align="left"><font color="#FF0000">*</font></div></td>
                    <td>&nbsp;</td>
                    <td valign="top"> <label> </label>                      <div align="left">
                        <input name="SerialNumber" type="text" id="Serial Number" size="30" />
                      </div></td>
                  </tr>
<tr>&nbsp;</tr>
    </table>
</div>
<table id="overhere" width="600" border="0" cellpadding="1" cellspacing="1" class="body" style="margin-bottom:5px">
<tr><td><div align="left">&nbsp;Add product?<div></td></tr>
<tr><td><div align="left"><input style="background-color:#f4f4f4;padding-top:2px" type="button" id="moreFields" onclick="moreFields" value="Click Here!" /></div></td></tr>
</table>
</div>[/code]

I got this working fine (with counter appended to the name value) after I removed all the table tags but I don't have time to do a total rewrite of this (I don't know how to use Dreamweaver).  Please help me :D

[fenway]

Two problems: one, your onclick handler should be moreFields(), as a function call; second, theName is undefined in your JS.  Not sure why, mind you, but apparently, your child nodes don't have names.

[jacobjacobjacob]

Hi,

There is a button set for onlick="moreFields".  Also theName is defined as the name value of the children of the "workplease" div.

I have redone the whole page is valid tableless xhtml and everything is working fine. 

Now,  I have two fields "serialNumber" and "productModel".  Everytime the button is clicked these two fields (inside a div) are cloned with "serialNumber1"/"productModel1", "serialNumber2"/"productModel2", etc.

I made a hidden input field whose value increases everytime the button is clicked so I can use this value in the mail script to know how many values to pull like $_POST['serialNumber'.counter].  Is there a better way of doing this?  Hard for me to explain this, I'm learning as I go.   

Thanks,

Jacob

[fenway]

Not really... there's really no way to "know" how many were added dynamically unless you pass it through.