Jump to content

How to create multiple input boxes

wallyson

By wallyson
in JavaScript

 Share

Recommended Posts

wallyson Newbie

wallyson

Posted
Posted

Hello, I am trying to create multiple input boxes in sets of 2 (one is for url, and the other for headline).Now the tricky part is that, There is a "+" button and a "-" button. If a user clicks on the "+" a new set of input boxes appear. and if they user clicks the "-" they input boxes go away.How do I do this in Jscript. Ill show a little of my code.

var cfields= new Array();var x = 0;function showFields(){	var divID= 'results';	var output='';		output+= '<div style="border: 1px solid; width: 151px;padding: 3px;" id="announcements"><input type="text" value="URL"><br>'+				'<input type="text" value="Headline"></div>';		output+='';	document.getElementById(divID).innerHTML = output;}///////////////////////////////////////////////////////////////////////////////function newField(){var foo = new showFields();cfields.push(foo);alert(cfields);x++;}</script><body> <!--<a href="#" onClick="showFields();">Click here</a><a href="#" onClick="newField();">new Field</a>--><br /><br /><table>	<tr>		<th><p>Email Generator</p></th>	</tr>	<tr>		<td>		<div style="border: 1px solid; width: 151px;padding: 3px;"><input type="text" value="Date"></div>		</td>	</tr>	<tr>		<th align="left"><p>Announcements</p></th>	</tr>	<tr>		<td>		<div style="border: 1px solid; width: 151px;padding: 3px;" id="announcements'+x+'"><input type="text" value="URL"><br>		<input type="text" value="Headline"></div>				<div id="results"></div>		</td>		<td valign="top">		<div style="border: 1px solid; width: px;padding: 3px;" align="center"><input type="button" value="+" onClick="showFields();"><br>			  <input type="button" value="-"></div>		</td>	</tr>	<tr>		<th align="left"><p>Press Release</p></th>	</tr>	<tr>		<td>		<div style="border: 1px solid; width: 151px;padding: 3px;" id="announcements'+x+'"><input type="text" value="URL"><br>		<input type="text" value="Headline"></div>		</td>		<td valign="top">		<div style="border: 1px solid; width: px;padding: 3px;" align="center"><input type="button" value="+"><br>			  <input type="button" value="-"></div>		</td>	</tr>	<tr>		<th align="left"><p>In the Press</p></th>	</tr>	<tr>		<td>		<div style="border: 1px solid; width: 151px;padding: 3px;" id="announcements'+x+'"><input type="text" value="URL"><br>		<input type="text" value="Headline"></div>		</td>		<td valign="top">		<div style="border: 1px solid; width: px;padding: 3px;" align="center"><input type="button" value="+"><br>			  <input type="button" value="-"></div>		</td>	</tr>	<tr>		<th align="left"><p>Point of View</p></th>	</tr>	<tr>		<td>		<div style="border: 1px solid; width: 151px;padding: 3px;" id="announcements'+x+'"><input type="text" value="URL"><br>		<input type="text" value="Headline"></div>		</td>		<td valign="top">		<div style="border: 1px solid; width: px;padding: 3px;" align="center"><input type="button" value="+"><br>			  <input type="button" value="-"></div>		</td>	</tr>	<tr>		<th align="left"><p>World Online</p></th>	</tr>	<tr>		<td>		<div style="border: 1px solid; width: 151px;padding: 3px;" id="announcements'+x+'"><input type="text" value="URL"><br>		<input type="text" value="Headline"></div>		</td>		<td valign="top">		<div style="border: 1px solid; width: px;padding: 3px;" align="center"><input type="button" value="+"><br>			  <input type="button" value="-"></div>		</td>	</tr></table></body></html>

I tryed to make an array and stuff a new set in the array. Im sure this is not how its done.If anybody could help I would appreciate it.Thanks,Wally

Link to comment
Share on other sites
jesh Devoted Member

jesh

Posted
Posted
I am trying to create multiple input boxes in sets of 2 (one is for url, and the other for headline).Now the tricky part is that, There is a "+" button and a "-" button. If a user clicks on the "+" a new set of input boxes appear. and if they user clicks the "-" they input boxes go away.
You should be able to do this using DOM - specifically .createElement(), .appendChild(), .removeChild().Check out the XML DOM and HTML DOM tutorials.
Link to comment
Share on other sites
wallyson Newbie

wallyson

Posted
  • Author
Posted
You should be able to do this using DOM - specifically .createElement(), .appendChild(), .removeChild().Check out the XML DOM and HTML DOM tutorials.
OK here is what I have using DOM to create some multiple input boxes:
<html><script>var annouceInputs = 1;////////////////////////////Creates new announcement //////////////////////////function addAnnounce(){    var table = document.getElementById('annoucementData');     var tr = document.createElement('TR');	  var td2 = document.createElement('TD');     var td3 = document.createElement('TD');	  var inp1 = document.createElement('INPUT');	//url for announcement  var inp2 = document.createElement('INPUT');	//headline for announcement  var breaks= document.createElement('br');  var inp3 = document.createElement('INPUT'); // delete "-" button  var p1 = document.createElement('p'); var p2 = document.createElement('p'); var inp4 = document.createElement('INPUT'); var break2 = document.createElement('br');  if(annouceInputs>0)  {			  var img = document.createElement('IMG');	   	 inp3.setAttribute('type', 'button');	 inp3.setAttribute('value', '-'); 	  inp4.setAttribute('type', 'button');	 inp4.setAttribute('value', '+');		 	p1.className='delete';		inp1.className= 'delete';	 	inp2.className= 'delete';	 	 td3.appendChild(inp4);	 td3.appendChild(break2);	 inp3.onclick = function()	 {				 removeElement(tr);			 }	 	 inp4.onclick = function()	 {	 	addAnnounce();	 }		 td3.appendChild(inp3);		 }		 inp1.setAttribute("name", "announceUrl"+annouceInputs);  	 inp1.setAttribute("value", "URL"+annouceInputs);  	 inp2.setAttribute("Name", "annouceHeadline"+annouceInputs);	 inp2.setAttribute("value", "Headline"+annouceInputs);		 table.appendChild(tr);		 	 td2.style.paddingLeft = "50px";	 tr.appendChild(td2);		 tr.appendChild(td3);	 td2.appendChild(inp1);	 td2.appendChild(breaks);  	 td2.appendChild(inp2);				 annouceInputs++;}////////////////////////////////Removes the new Child element//////////////////////////////function removeElement(tr){		tr.parentNode.removeChild(tr);}</script><body onload="addAnnounce();" > <br /><br /><FORM NAME="myform" ACTION="#" METHOD="GET"><table> 		<tr>		<th><p>Email Generator</p></th>	</tr>	<tr>		<td style="padding-left: 50px;">		<input class="delete" type="text" name="date" value="Date">		</td>	</tr>	<tr>		<th align="left"><p>Announcements</p></th>			<td valign="top">		<input type="button" value="+" onClick="addAnnounce();">		</td>	</tr>	<tr>		<tbody id="annoucementData" valign="top" border="1">		</tbody>	</tr></table></FORM></body></html>

Ok you can pretty much copy and paste that into a temp page, and view what it does.I got it to do what I want, but now Im having trouble actually collecting the data.How do I get the data from the multiple input boxes now that I have created them?Please help.Wally

Link to comment
Share on other sites
jesh Devoted Member

jesh

Posted
Posted
Ok you can pretty much copy and paste that into a temp page, and view what it does.
Yeah, that worked great in my browser.
I got it to do what I want, but now Im having trouble actually collecting the data.How do I get the data from the multiple input boxes now that I have created them?
Now, since the number of elements on your form is dynamic (depending on how many times the user clicked one of the "+" buttons), you'll have to iterate through the elements of the form to get at the values. Something along the lines of this?
function get_values(){    var count = document.myform.elements.length;    for(var i = 0; i < count; i++)    {        var element= document.myform.elements[i];        if(element.type == "text")        {  // we're only interested in the text inputs            if(element.name.indexOf("announceUrl") > -1)            {   // this iteration is for the URL                // get the value by using "element.value"                // and then do whatever you need with it.            }            else if(element.name.indexOf("announceHeadline") > -1)            {   // this iteration is for the headline                // get the value by using "element.value"                // and then do whatever you need with            }        }    } }

Hope this helps!

Link to comment
Share on other sites
wallyson Newbie

wallyson

Posted
  • Author
Posted
Yeah, that worked great in my browser.Now, since the number of elements on your form is dynamic (depending on how many times the user clicked one of the "+" buttons), you'll have to iterate through the elements of the form to get at the values. Something along the lines of this?
function get_values(){    var count = document.myform.elements.length;    for(var i = 0; i < count; i++)    {        var element= document.myform.elements[i];        if(element.type == "text")        {  // we're only interested in the text inputs            if(element.name.indexOf("announceUrl") > -1)            {   // this iteration is for the URL                // get the value by using "element.value"                // and then do whatever you need with it.            }            else if(element.name.indexOf("announceHeadline") > -1)            {   // this iteration is for the headline                // get the value by using "element.value"                // and then do whatever you need with            }        }    } }

Hope this helps!

Ha I ended up figuring it out. I simply added in an ID in the two input fields.Then getElementById it. Thanks for helping me out though, your first post helped themost. hahahaWally
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...