Jump to content

Add Extra Text Input fields


jacobjacobjacob

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

  • 3 weeks later...
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

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.