onclick add new form field?

[ag3nt42]

I'm trying to create a button that will (once clicked)

 

create a new input form right beneath the first one..

 

but it doesn't seem to work for me.. the best I can get is it creates a whole new page and writes it there..

 

here is my code:

<form action='../Ca_info/Cct_info.php' method='post'>
				<table>
					<tr>
						<td style='text-align:right;'><label>Type: </label></td>
						<td style='text-align:left;'><input type='text' value='' name='Ctype[]' /></td>
					</tr>
					<script type='text/javascript'>

					function MakeInput()
					{
						document.write(\"<tr><td style='text-align:right;'><label>Type: </label></td><td style='text-align:left;'><input type='text' value='' name='Ctype[]' /></td></tr>\");
					}

					</script>
					<tr>
						<td colspan='2'><input type='button' value='ADD +' onclick='MakeInput();' /></td>
					</tr>
					<tr>
						<td> </td>
					</tr>
					<tr>
						<td style='text-align:right;'><input type='reset' value='Reset' /></td>
						<td style='text-align:left;'><input type='submit' value='Submit' /></td>
					</tr>
				</table>
			</form>

[KevinM1]

I'm trying to create a button that will (once clicked)

 

create a new input form right beneath the first one..

 

but it doesn't seem to work for me.. the best I can get is it creates a whole new page and writes it there..

 

here is my code:

<form action='../Ca_info/Cct_info.php' method='post'>
				<table>
					<tr>
						<td style='text-align:right;'><label>Type: </label></td>
						<td style='text-align:left;'><input type='text' value='' name='Ctype[]' /></td>
					</tr>
					<script type='text/javascript'>

					function MakeInput()
					{
						document.write(\"<tr><td style='text-align:right;'><label>Type: </label></td><td style='text-align:left;'><input type='text' value='' name='Ctype[]' /></td></tr>\");
					}

					</script>
					<tr>
						<td colspan='2'><input type='button' value='ADD +' onclick='MakeInput();' /></td>
					</tr>
					<tr>
						<td> </td>
					</tr>
					<tr>
						<td style='text-align:right;'><input type='reset' value='Reset' /></td>
						<td style='text-align:left;'><input type='submit' value='Submit' /></td>
					</tr>
				</table>
			</form>

 

You're having problems because document.write() overwrites the current document.  If you want to create new elements, the safest way is to use the W3C functions, such as createElement(), createTextNode(), appendChild(), etc.

[ag3nt42]

i don't spose you could give me an example on how to generate a input and store in a variable or something so I can write it out to my page.. on the event?  :-\

[ag3nt42]

i can do this is php no problem but I would like users not to have to refresh the page everytime they click on ADD ya kno.

 

Not much good with JS unfortunatley

[KevinM1]

i don't spose you could give me an example on how to generate a input and store in a variable or something so I can write it out to my page.. on the event?  :-\

 

It's pretty basic:

var newInput = document.createElement("input");
newInput.setAttribute("name", "userName");
newInput.setAttribute("type", "text");

form.appendChild(newInput); //assumes you have a variable named "form" that refers to an existing form.

/* should create <input name="userName" type="text"> */

[ag3nt42]

excellent.. i'll give this a shot

 

thanx alot for your response nightslyr

[ag3nt42]

 

form.appendChild(newInput); //assumes you have a variable named "form" that refers to an existing form.

 

 

does this comment mean that I need to have a previous object created by js to do this or does it mean if I give  my form a name 'form' it will append an input onto that form?

[ag3nt42]

ok scratch the above.. its working .../sorta/

 

but its putting the new input on the bottom of the form underneath the submit buttons..

I need it under the first input

[ag3nt42]

so close .. don't leave me hanging now... :'(

 

 

just need to be able to position it. underneath the first input

[KevinM1]

ok scratch the above.. its working .../sorta/

 

but its putting the new input on the bottom of the form underneath the submit buttons..

I need it under the first input

 

Hmm...I don't think there's a way to control where new elements will attach themselves while using appendChild.  It always puts the element at the end of the list of child elements.  I think there may be a prependChild function, but that would force the new element to be the first child element, which is also something you don't want.

 

You can try:

form.innerHTML = "stuff";

 

Where stuff is everything you want within your <form> tag.  This means, however, you'd have to rewrite your entire form, including the new input(s), as the "stuff" value.

[ag3nt42]

well I find this all pretty much useless.. i guess I'll use php to do it. thanks for your help tho nightslyr you gave very informative responses..

 

 

[KevinM1]

Now that I think about it, why not write all potential form inputs, then have them appear when the proper button/element is clicked?  That's a lot easier than trying to add/remove elements from the document.