HTML Form HIdden Fields added with Javascript not POSTing

Question

I have a form where the user can enter a link, click the "add link" button, and that link is then(via jQuery) added to the form as a hidden field. The problem is it's not POSTing when I submit the form. It's really starting to confound me. The thing is that if I hardcode a hidden field into the form, it is posted, but my function isn't working for some reason. The hidden field DOES get added to my form as I can see with Firebug but it's just not being sent with the POST data.

Just to note, I'm using an array in Javascript to hold the elements until the form is submitted which also posts them visibly for the user to see what they've added. I'm using [] notation on the "name" field of the element because I want the links to feed into an array in PHP.

Here is the link creation which is being appended to my form:

        function make_hidden_element_tag(item_type, item_content, item_id)
{
    return '<input type="hidden" name="' + item_type + '[]" id="hidden_link_' + item_id + '" value="' + item_content + '"/>';

Does anyone have an idea why this might not be posting. As stated above, any hard-coded tags that are nearly identical to the above works fine, it's just that this tag isn't working. Here is how I'm adding the tag to the form with jQUery:

$('#link_td').append( make_hidden_element_tag('links', link, link_array.length - 1));

I'm using the Kohana 3 framework, although I'm not sure that has any bearing on this because it's not really doing anything from the time the HTML is added to the page and the submit button is pressed.

Answer 1

If the data is not being posted to the server, the input element is definitely not being added to the form.

Try executing the following piece of code before form submission:

<form onsubmit="return doBeforeSubmit(this);"> ... </form>

And the function is...

function doBeforeSubmit(form)
{
   var es = form.elements;
   var l = es.length;

   var msgs = [];

   for(var idx = 0; idx < l; idx++)
   {
      var e = es[idx];
      msgs.push('name=' + e.name + ', type=' + e.type + ', value=' + e.value;
   }

   alert(msgs.join('\n'));
   return false;
}

If you don't get your field, then the "input" is not added to the form but elsewhere.

If you do get the field... we'll need to dig deeper.