Adding more fields, loosing previous input

**omnibreak** · Sep 23, 2007, 23:57

I am creating a form and each anime may have several names so i have the name field and the name-type field for each name as a whole. As there may be more than one name as a whole i have a javascript that adds a new set as many as is needed.

My code is:

In the <head>

Code JavaScript:

function addInput() {
  display();
}
 
function display() {
 
  document.getElementById('parah').innerHTML+=createInput();
 
}
 
function createInput() {
  return "<fieldset>		<legend>Anime Name</legend>	<dl>	<dt><label for=\"user\">Name</label><br /><span>Primary name of anime for site.</span></dt>	<dd><input name=\"animename[]\" type=\"text\"></dd>	</dl>	<dl>	<dt><label for=\"user\">Name Extra</label><br /><span>Additional info: French, German etc.</span></dt>	<dd><input name=\"animenametype[]\" type=\"text\" ></dd>	</dl>	</fieldset>";
}

And in the body:

Code HTML4Strict:

<fieldset>
		<legend>Anime Name</legend>
	<dl>
	<dt><label for="user">Name</label><br /><span>Primary name of anime for site.</span></dt>
	<dd><input name="animename[]" type="text" required="1"></dd>
	</dl>
	<dl>
	<dt><label for="user">Name Extra</label><br /><span>Additional info: French, German etc.</span></dt>
	<dd><input name="animenametype[]" type="text" required="1"></dd>
	</dl>
	</fieldset>
 
 
	<div id="parah"></div>
<a href="javascript:addInput()">Add more Name(s)?</a><br>

Now i can add as many as i like and it will process it all correctly.

My problem is say i write some data into the static (html coded) fields and then add a new one its fine. I enter some data into the new ones then add another. After a second one is added i loose the data i entered previously.

It all works well if i add as many fields as i need before entering anything but would really like to (for ease of use) add one, fill it in, add onther, fill it in and so on.

Wandering if there was a way to preserve any info already added.

**Logic Ali** · Sep 24, 2007, 04:36

Originally Posted by omnibreak

function display() {

document.getElementById('parah').innerHTML+=createInput();

}

Now i can add as many as i like and it will process it all correctly.

My problem is say i write some data into the static (html coded) fields and then add a new one its fine. I enter some data into the new ones then add another. After a second one is added i loose the data i entered previously.

Using .innerHTML does not append new elements to the form, even if it appears that way. If you want to add elements, you must use DOM methods, then you won't 'loose' anything.

The SitePoint Forums have moved.

User Tag List

Thread: Adding more fields, loosing previous input

Thread Tools

Display

Adding more fields, loosing previous input

Bookmarks

Bookmarks

Posting Permissions