JQuery add hidden element to form programmatically

Question

Hi Guys

This is really getting to me now.I have a form that loads when the page loads.In my jquery 'ready' function I append a hidden to that form like so :

$("<input id='thehidden' type='hidden' name='thehidden' value='hiddenval'>").appendTo("#MenuForm")

When I check the form content with firebug i can see the element is added.

["$(\"#MenuForm\").children()"] is [div, input#thehidden hiddenval]

All good so far.When I submit this form and try and read the elemet again,i can't get the value of the new hidden val I added.

alert($('#thehidden').val())

is undefined

Any help would be appreciated

Answer 1

You need to insert the input ELEMENT into the DOM, not just inject HTML into the page. When it comes for form fields, there is a difference.

Use var field = $(document.createElement('input')), then set the attributes of the field.

Answer 2

try

$('#someid').append($('<input></input>').attr('id','hidden1').attr('type','hidden').attr('value','some val'));

Answer 3

When exactly are you trying to read the value from #thehidden div? When the submit button is pressed or when the page reloads after submit? If you don't create the input every time on page load, it's not going to be there the next page load.

I tested your code with just creating the input and reading the value back in an alert and it works fine for me. Check it out for yourself.