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

dear use the jquery's plugin to add html dom elements dynamically, what is #link_td ??

Answer 2

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.

Answer 3

I just figured out what the issue was. I'm embarrassed and confounded. As stated I'm using Kohana Framework. Not sure that has anything to do with this but it might be important.

I had my elements in this order:

<table>
    <form>
       .............form stuff.......
    </form>
</table>

and it was not allowing my added data to join the POST array when submitting the form, even though the elements that were "hard coded" using Kohana's FORM class were working fine. I just noticed that the was coming before the entire branch. I had looked to make sure I had a Form::close in my Kohana view but never imagined it was closing directly after the opening tag.

Thanks a lot for the help. This is one of those bugs that just didn't make sense but I guess it kind of makes sense why the $.append wasn't working before. I always looked and saw it appending directly next to the other tags which WERE being sent with the POST data and so assumed that all of this was happening inside the FORM.

Can anyone explain why the needs to encapsulate the as opposed to vice versa in order for HTML to render it correctly? Or is this more likely to be a Kohana issue?

Thanks a lot for everyone's help, this was sort of a good(but extremely frustrating) lesson.