adding form elements with javascript - they won't submit

Question

This is similar to the problem here: .../questions/1386228/add-form-element-dynamically-using-javascript-not-submitting but I don't know what his answer was besides rewriting from scratch.

Here's my problem:

Form elements added dynamically to the page do not appear in the $_POST array. I'm doing this same method several other instances on the page and it works fine, i'm hoping there is just a typo or something obvious I am missing.

HTML

<tr valign="top">
<td></td>
<td align="right">Staff Comments:</td>
<td></td>
<td>

<select name="staffcomment0[scstid]">
<option value="">Choose</option>
<option value="10">Abs</option>
<option value="4">Andy</option>
</select> says:<br>
<TEXTAREA NAME="staffcomment0[desc]" ROWS="3" COLS="55" WRAP tabindex="99">Brilliant stuff</TEXTAREA><br><br>

<select name="staffcomment1[scstid]">
<option value="">Choose</option>
<option value="10">Abs</option>
<option value="4">Andy</option>
</select> says:<br>
<TEXTAREA NAME="staffcomment1[desc]" ROWS="3" COLS="55" WRAP tabindex="99">Great!</TEXTAREA><br><br>

<SPAN ID="staffcomments"></SPAN>

<A HREF="javascript:addComment()">add another comment</A></td>
</tr>

Javascript:

var commentNo = 2;

function addComment() {

outcHTML = "<select name='staffcomment" + commentNo + "[scstid]'><option value=''>Choose</option>";
outcHTML += "<option value='10'>Abs</option>";
outcHTML += "<option value='4'>Andy</option>";
outcHTML += "</select> says:<br><TEXTAREA NAME='staffcomment" + commentNo + "[desc]' ROWS='3' COLS='55' WRAP tabindex='99'></TEXTAREA><br><br>";

var newdiv = document.createElement("div");
newdiv.innerHTML = outcHTML;
var container = document.getElementById("staffcomments");
container.appendChild(newdiv);

commentNo++;
}

Added HTML but realised it is too long to be displayed properly!

Can you show us the <form> element this is all in please?

Crescent Fresh
– Crescent Fresh

2009-11-18 18:24:46 +00:00
Commented Nov 18, 2009 at 18:24 — Crescent Fresh
– Crescent Fresh, Commented Nov 18, 2009 at 18:24
I've pasted full HTML of the page if you would like to see

Ashley
– Ashley

2009-11-19 13:48:35 +00:00
Commented Nov 19, 2009 at 13:48 — Ashley
– Ashley, Commented Nov 19, 2009 at 13:48

Hank Gay · Accepted Answer · 2009-11-18 18:13:09Z

3

When you're watching the DOM in Firebug, are the new elements actually inside the <form> element?

answered Nov 18, 2009 at 18:13

Hank Gay

72.4k36 gold badges164 silver badges224 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ashley Over a year ago

they are inside the form element in the HTML panel of Firebug, I don't really know how to check in the DOM panel. If you could tell me what you are looking for I will let you know. Thanks! Just pasted the full HTML in original question by the way

Pekka Over a year ago

Is "staffcomments" inside the form? If it's not, that is probably the reason.

delfuego · Accepted Answer · 2009-11-18 18:16:50Z

1

Your HTML is munged, so it's hard to know exactly what's going on, but I'm fairly certain the answer is that you're adding the elements as straight HTML, not as DOM objects.

In other words, instead of setting the innerHTML of newdiv, you have to append new objects to it, such as:

var newInput = document.createElement("input");
newInput.type="text";
newInput.name="inputName";
newdiv.appendChild(newInput);

(Code typed off the top of my head, so apologies for any typos...)

And as another commenter noted, you have to also make sure that you append the new objects inside the form object in the DOM.

answered Nov 18, 2009 at 18:16

delfuego

14.3k4 gold badges42 silver badges39 bronze badges

1 Comment

Kornel Over a year ago

actually, this API is buggy in IE, and type/name will be ignored. IE has to get innerHTML.

Collectives™ on Stack Overflow

adding form elements with javascript - they won't submit

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related