Adding TextFields to Form

[Iain Adams]

Hi,

I want to be able to add text fields to a form when a button is
clicked. At the moment I have a fieldset which has a button in it.
when the button is clicked I want a new text field to be shown in the
fieldset. Then this can be filled in and submit called.

I am having trouble because;

you click the button and a text field is added
then you fill in the text field
you then click the button again so you can add another option
the first text field loses the text inside it. BOO

My Code looks like this
....
<fieldset id="options">

<h2>Options</h2>
<p><button type="button" onClick="addOptionField('options')" >New
Option</button></p>
</fieldset>
....

JS =

function addOptionField(elementid){
if(document.getElementById(elementid)){
element = document.getElementById(elementid)
if(document.getElementsByName){
//do something here to remember the values?????
}
element.innerHTML += "<input type=\"text\" name=\"options[]\"
size=50 ><br/>"
}else{
document.getElementById('options').innerHTML += "<input type=\"text
\" name=\"options[]\" size=50 ><br/>"
}
}

 

[David Golightly]

Hi,

I want to be able to add text fields to a form when a button is
clicked. At the moment I have a fieldset which has a button in it.
when the button is clicked I want a new text field to be shown in the
fieldset. Then this can be filled in and submit called.

I am having trouble because;

you click the button and a text field is added
then you fill in the text field
you then click the button again so you can add another option
the first text field loses the text inside it. BOO

My Code looks like this
...
<fieldset id="options">

<h2>Options</h2>
<p><button type="button" onClick="addOptionField('options')" >New
Option</button></p>
</fieldset>
...

JS =

function addOptionField(elementid){
if(document.getElementById(elementid)){
element = document.getElementById(elementid)
if(document.getElementsByName){
//do something here to remember the values?????
}
element.innerHTML += "<input type=\"text\" name=\"options[]\"
size=50 ><br/>"
}else{
document.getElementById('options').innerHTML += "<input type=\"text
\" name=\"options[]\" size=50 ><br/>"
}

}

Use DOM element creation techniques. They will solve your problem
here. Using innerHTML will cause the DOM nodes in the parent element
to be "reset", that is, lose whatever non-coded state they may have
had before as the contents of the parent are converted to text and
back. So:

var input = document.createElement('input');
input.type = 'text';
input.name = 'options'+uid++; // var uid=0 defined elsewhere;
should make sure each element's name is unique
input.size = '50';
element.appendChild(input);

-David

 

[Iain Adams]

Hi,

I want to be able to add text fields to a form when a button is
clicked. At the moment I have a fieldset which has a button in it.
when the button is clicked I want a new text field to be shown in the
fieldset. Then this can be filled in and submit called.

I am having trouble because;

you click the button and a text field is added
then you fill in the text field
you then click the button again so you can add another option
the first text field loses the text inside it. BOO

My Code looks like this
...
<fieldset id="options">

<h2>Options</h2>
<p><button type="button" onClick="addOptionField('options')" >New
Option</button></p>
</fieldset>
...

JS =

function addOptionField(elementid){
if(document.getElementById(elementid)){
element = document.getElementById(elementid)
if(document.getElementsByName){
//do something here to remember the values?????
}
element.innerHTML += "<input type=\"text\" name=\"options[]\"
size=50 ><br/>"
}else{
document.getElementById('options').innerHTML += "<input type=\"text
\" name=\"options[]\" size=50 ><br/>"
}

}

Use DOM element creation techniques. They will solve your problem
here. Using innerHTML will cause the DOM nodes in the parent element
to be "reset", that is, lose whatever non-coded state they may have
had before as the contents of the parent are converted to text and
back. So:

var input = document.createElement('input');
input.type = 'text';
input.name = 'options'+uid++; // var uid=0 defined elsewhere;
should make sure each element's name is unique
input.size = '50';
element.appendChild(input);

-David

David thanks alot. That worked a treat. Thanks again