Dionis Beqiraj February 2016

JQuery hidden field value null when form is serialized and posted

I have the following html script:

<form id="myForm">
...
<input hidden name="myInput" id="myInput">
...
</form>

And somewhere I set a value for the hidden input:

$('#myInput').val('a value here');

then, I serialize the form and post it in an url:

$.post("my_url_here", $("#myForm").serialize())

Where I handle this post, I try to access my hidden input value with:

$_POST['myInput']

but it shows null (empty actually), when I expect it to have the value that I set before. If I explicitly set the value like this:

<input hidden name="myInput" id="myInput" value="explicit_value">

it works fine. Any idea what's going on?

UPDATE (the whole code, the order is the same as in my real code):

<script>

    jQuery( document ).ready(function( $ ) {
           eventHandler(){
             ...
             $('#myInput').val('a value here');
             myPostFunction();
          }
    });

</script>
<form id="myForm">
    ...
    <input hidden name="myInput" id="myInput">
    ...
</form>
<script>

    jQuery( document ).ready(function( $ ) {
           window.myPostFunction= function () {
             alert($("#myForm").serialize());//It shows myField=&otherField=value
             alert($("#myInput").val());// This shows the correct value.
             $.post("my_url_here", $("#myForm").serialize());
          }
    });

</script>

Answers


budiantoip February 2016

That should work, but try to compare with mine, and see the result :)
You are using PHP right?
Try to create a new php file, named sendAjax.php and type this :

<!doctype html>
<html>
    <head>
        <title>http://stackoverflow.com/questions/35281545/jquery-hidden-field-value-null-when-form-is-serialized-and-posted</title>
        <script src="jquery-1.7.1.min.js"></script>
    </head>
    <body>
        <form id="myForm">
            <input type="hidden" name="myInput" id="myInput"/>
        </form>
        <script>
            (function(){
                $('#myInput').val('a value here');
                $.post("receiveAjax.php", $("#myForm").serialize(), 
                    function(data){
                        alert(data);
                    });
            })();
        </script>
    </body>
</html>

And create another new php file, named receiveAjax.php, put it into the same folder as sendAjax.php and type this :

<?php
    $data = $_POST;
    var_dump($data);
?>


Marc February 2016

"hidden" should be the value of the "type" attribute, I don't know if it's related but try to replace :

<input hidden name="myInput" id="myInput">

By :

<input type="hidden" name="myInput" id="myInput">


Dionis Beqiraj February 2016

OK, thank you all for your help but finally I found the solution. It was the name of the field that wasn't OK. I just changed the name of the field and it is fine now. It should have been a conflict with the name but I did't realize it since the script executed fine. After trying all, I thought to change the name... Again, thank you all!

Post Status

Asked in February 2016
Viewed 2,604 times
Voted 4
Answered 3 times

Search




Leave an answer