Jump to content


Photo

Add Extra Text Input fields


  • Please log in to reply
3 replies to this topic

#1 jacobjacobjacob

jacobjacobjacob
  • New Members
  • Pip
  • Newbie
  • 2 posts

Posted 27 October 2006 - 12:17 AM

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.
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);
}

HTML
			  <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>

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

#2 fenway

fenway
  • Staff Alumni
  • MySQL Si-Fu / PHP Resident Alien
  • 16,199 posts
  • LocationToronto, ON

Posted 28 October 2006 - 04:22 PM

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.
Seriously... if people don't start reading this before posting, I'm going to consider not answering at all.

#3 jacobjacobjacob

jacobjacobjacob
  • New Members
  • Pip
  • Newbie
  • 2 posts

Posted 31 October 2006 - 12:52 AM

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

#4 fenway

fenway
  • Staff Alumni
  • MySQL Si-Fu / PHP Resident Alien
  • 16,199 posts
  • LocationToronto, ON

Posted 21 November 2006 - 12:31 AM

Not really... there's really no way to "know" how many were added dynamically unless you pass it through.
Seriously... if people don't start reading this before posting, I'm going to consider not answering at all.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users