Why i not get post data when use javascript submit form by not loadpage?

Question

Why i not get post data when use javascript submit form by not loadpage ?

First load page a.php and then press OK button why not echo $_POST["id"]

Here is javascript code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<form id="myForm" name="myForm" action="b.php" method="post">
    <input type="text" name="id" value="1111111111111111111">
    <button name="element" id="element" type="submit">OK</button>
    <div id="element_loading" style="display: none;">loading..................</div>
    <span id="element_result"></span>
</form>

<script type="text/javascript">
$('#myForm').submit(function(e){
    e.preventDefault();
    $.ajax({
        url: $("#myForm").attr("action"),
        data: $("#myForm:input").serializeArray(),
        type: 'post',
        dataType: 'html',
        success: function(data){
            $("#element_result").html(data);
        },
        beforeSend: function(){
            document.getElementById("element").disabled = true;
            document.getElementById("element_loading").style.display="inline";
            $("#element_result").hide()
        },
        complete: function(data){
            document.getElementById("element").disabled = false;
            document.getElementById("element_loading").style.display="none";
            $("#element_result").show()
        }
    });
});
</script>

And this is php code

<?PHP echo $_POST["id"]; ?>

Press F12 to open the console and check if there are any error messages. — Phiter, Apr 26 '16 at 11:04
Open the network tab and press F5. Check if the b.php page is being requested. — Phiter, Apr 26 '16 at 11:07
`$("#myForm:input")` your selector is wrong, its either `#myForm :input` with a space inbetween, or just the id `#myForm`, — Patrick Evans, Apr 26 '16 at 11:07
To find `:input` elements in the `form`, you must have a space in the `selector` as `:input` are children of the `form`! — Rayon, Apr 26 '16 at 11:12

score 2 · Answer 1 · answered Apr 26 '16 at 11:07

The best thing to do is to serialize the entire form, this can be done using the serialize function. This function is specifically made for things like this. :)

<script type="text/javascript">
$('#myForm').submit(function(e){
    e.preventDefault();
    $.ajax({
        url: $("#myForm").attr("action"),
        data: $("#myForm").serialize(), // <-- Like this
        type: 'post',
        dataType: 'html',
        success: function(data){
            $("#element_result").html(data);
        },
        beforeSend: function(){
            document.getElementById("element").disabled = true;
            document.getElementById("element_loading").style.display="inline";
            $("#element_result").hide()
        },
        complete: function(data){
            document.getElementById("element").disabled = false;
            document.getElementById("element_loading").style.display="none";
            $("#element_result").show()
        }
    });
});
</script>

score 0 · Answer 2 · answered Apr 26 '16 at 11:08

0

Just change this:

$.ajax({
   ...     
   data: $("#myForm").serializeArray(), // change
   ...
});

answered Apr 26 '16 at 11:08

Dhara Parmar

8,021
1
16
27

because serializeArray method can act on a jQuery object that select individual form controls, such as , , and <select>. So we do not need to add :input</select> – Dhara Parmar Apr 26 '16 at 11:15
@DharaParmar But if we want only value for input type then why we will use whole id('#myForm') ? It's not make sense. – Vipul Jethva Apr 27 '16 at 07:17
$('#myForm input').serialize(); does it make sense now? – Dhara Parmar Apr 27 '16 at 07:25

Why i not get post data when use javascript submit form by not loadpage?

2 Answers2