jacobjacobjacob
-
Posts
2 -
Joined
-
Last visited
Never
Posts posted by 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"> </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> </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> </td>
<td valign="top"> <label> </label> <div align="left">
<input name="SerialNumber" type="text" id="Serial Number" size="30" />
</div></td>
</tr>
<tr> </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"> 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
Add Extra Text Input fields
in Javascript Help
Posted
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