Jump to content

Archived

This topic is now archived and is closed to further replies.

jacobjacobjacob

Add Extra Text Input fields

Recommended Posts

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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
Not really... there's really no way to "know" how many were added dynamically unless you pass it through.

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.