Dynamically Created Fields with Firefox

[ogdenmd]

I want to give the user the abillity to add extra fields as needed.
I've got it working in IE (surprsingly this works in IE but not in
Firefox), however, basically I have an input field for a paragraph. If
the user decides they want two paragraps then they can click an image
and a new textarea field is show that allows them to add another
paragraph. The fields are named as an array for example name="para[0]"
the next one would then be name="para[1]". Firefox creates the field
and shows it to the user however when you submit the form the new field
does not come through. My array of paragraphs consists only of the
original number I started with. Any added by the javascript are lost.
Again IE this works fine, Firefox it works till you submit the form.
Any ideas?

 

[RobG]

ogdenmd said on 05/04/2006 9:38 AM AEST:

I want to give the user the abillity to add extra fields as needed.
I've got it working in IE (surprsingly this works in IE but not in
Firefox), however, basically I have an input field for a paragraph. If
the user decides they want two paragraps then they can click an image
and a new textarea field is show that allows them to add another
paragraph. The fields are named as an array for example name="para[0]"
the next one would then be name="para[1]". Firefox creates the field
and shows it to the user however when you submit the form the new field
does not come through. My array of paragraphs consists only of the
original number I started with. Any added by the javascript are lost.
Again IE this works fine, Firefox it works till you submit the form.
Any ideas?

Show how you are adding the extra form controls - we can't fix what we
can't see.

Try this sample - I've used an input element, but you could use a
textarea or whatever:


<script type="text/javascript">

function addInput(el)
{
var b, o, p;
if ( document.createElement
&& (o=document.createElement('input'))
&& (p=el.parentNode)){
o.type = 'text';
o.name = 'para[' + (el.form.elements.length - 1) + ']';
b = document.createElement('br');
p.appendChild(b);
p.appendChild(o);
p.appendChild(document.createTextNode(o.name));
}
}

</script>
<form action="">
<div>
<input type="button" value="Add input"
onclick="addInput(this);">
</div>
<div><input type="submit"></input>
</form>

 

[RobG]

Ian Collins said on 05/04/2006 11:29 AM AEST:

I want to give the user the abillity to add extra fields as needed.
I've got it working in IE (surprsingly this works in IE but not in
Firefox), however, basically I have an input field for a paragraph. If
the user decides they want two paragraps then they can click an image
and a new textarea field is show that allows them to add another
paragraph. The fields are named as an array for example name="para[0]"
the next one would then be name="para[1]".

Is that a legal value for an attribute? Have you tried 'para0' and 'para1'?

Yes. The value of the name attribute for a form control is CDATA, i.e.
almost anything.

<URL:http://www.w3.org/TR/html4/interact/forms.html#adef-name-INPUT>

 

[ogdenmd]

My appologies for not adding my code . I'll give yours a try, however
here's what I've used....

function add_paragraph(curNum) {
showNum = curNum + 1;
var para_table =
document.getElementById('desc_para').getElementsByTagName("TBODY")[0];
var new_tr = document.createElement("TR");
var new_td = document.createElement("TD");
new_td.width = "15%";
new_td.className = "form_lable";
new_td.vAlign = "top";
new_td.innerHTML = "Description " + showNum + ":";
new_tr.appendChild(new_td);
new_td = document.createElement("TD");
txt_area_name = 'item[item_details][long_desc][' + curNum + ']';
new_td.innerHTML = "<textarea name='" + txt_area_name + "' cols='40'
rows='5' wrap='virtual'></textarea>&nbsp;<a href='javascript:void()'
onClick='javascript:add_paragraph(" + curNum + ");'><img
src='modules/constancontact/xarimages/add_para.gif' border='0' /></a>";

new_tr.appendChild(new_td);
para_table.appendChild(new_tr);
}

 

[ogdenmd]

okay tracked the error down.....Turns out is all goes back to not
closing my original Form tag. I had started the form, then after a
couple of includes the document that actually contains the form is
called and then it should have closed it....I got the example above
working just fine outside my original program which then told me that
it wasn't Firefox that was the problem . Big surprise there.