JQuery add hidden element to form programmatically

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开发者_JAVA百科').val())

is undefined

Any help would be appreciated

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.

try

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

You can create a jQuery function to do most of the work for you. I use this function to add hidden inputs programatically:

jQuery Function:

// This must be applied to a form (or an object inside a form).
jQuery.fn.addHidden = function (name, value) {
    return this.each(function () {
        var input = {};
        if (Object.prototype.toString.call(value) === '[object Array]') {
            var r = /\[\]/;
            // Pass an array as a series of separate hidden fields.
            for (var i = 0; i < value.length; i++) {
                input = $("<input>").attr("type", "hidden")
                                    .attr("name", name.replace(r, '[' + i + ']'))
                                    .val(value[i]);
                $(this).append($(input));
            }
        } else {
            input = $("<input>").attr("type", "hidden")
                                .attr("name", name)
                                .val(value);
            $(this).append($(input));
        }
    });
};

Usage:

For standard form items or simple parameters in MVC theHidden as String:

$('#myform').addHidden('theHidden', 'jam');
=> <input type="hidden" name="theHidden" value="jam">

For list parameters in MVC ID As List(Of Integer):

$('#myform').addHidden('ID', [1,2,5]);
=> <input type="hidden" name="ID" value="1">
   <input type="hidden" name="ID" value="2">
   <input type="hidden" name="ID" value="4">

For complex types in MVC which have a List property model As ComplexType:

$('#myform').addHidden('Customer[].CustomerID', [1,2,5]);
=> <input type="hidden" name="Customer[0].CustomerID" value="1">
   <input type="hidden" name="Customer[1].CustomerID" value="2">
   <input type="hidden" name="Customer[2].CustomerID" value="5">

Class ComplexType
    Property Customer As List(Of CustomerDetail)
End Class
Class CustomerDetail
    Property CustomerID As Integer
End Class

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.