POST form with JQuery using $.post()

Question

I have the following form

<form id="colorTest" method="POST">
    <input type="text" id='responseText' name="responseText" value="">
    <input type="button" id='confirm' name="confirm" value="confirm">
    <input type='text' id="idNum" name="idNum">
    <input type='text' id='correct' id="correct">
</form>

Only the value for #responseText is actually typed in, #idNum is passed from another page, while the other fields are filled by this function:

<script type="text/javascript">
    var arr = [2,5,6,7,10,16,29,42,57];
    x = 0
    /* idNum is passed from another page to this one */
    $(document).ready(function() {
        document.getElementById('idNum').value = localStorage.memberID;
        /* when something is typed in the form */
        $('#responseText').on('input', function() {
            /* the value is stored */
            var response = document.getElementById('responseText').value;
            /* and compared with the vector arr that contains the correct answers*/
            if( response == arr[x]){
                $("#correct").attr('value', 'yes');
            }else{ 
                $("#correct").attr('value', 'no');
            };
        });
       /* confirm is the button to send the asnwer */
       $('#confirm').click(function(){
           $.post("testColor.php", $("#colorTest").serialize());
           x = x + 1;
       });
   });      
</script>

And here is my php:

<?php
    // Create connection
    $conn = new mysqli($servername, $username, $password, $dbname);
    // Check connection
    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    }

    $response = $_POST["responseText"];
    $memberID = $_POST["idNum"];
    $timeStmp = time();
    $correct = $_POST["correct"];

    $sql = "INSERT INTO colorBlind (memberID, response, correct, timeStmp)
            VALUES ('$memberID', '$response' ,'".$correct."','".$timeStmp."')";

    if ($conn->query($sql) === TRUE) {
        echo "New record created successfully";
    } else {
        echo "Error: " . $sql . "<br>" . $conn->error;
    }

    $conn -> close();
?>

Now, I am sure the php is called correctly when the click event occurs on #confirm, because the timestamp invoked in the php is recorded in my db. Nevertheless, none of the value in the fields is passed in the php. Namely if do somethin like:

echo $_POST["idNum"];

I get back an empty field.

Anybody has any idea what I am doing wrong or any suggestions on how to debug it? I have been spending days on this without any progress.

are u passing variable in another php page or all of this is in the same page? — mwweb, Oct 30 '15 at 23:36
no `idNum` related stuff inside the `#confirm` clicked event handler. — Ari, Oct 31 '15 at 03:32
@ mwweb They are two different page, the php is separated @ Mohamed-Yousef Sorry I messed up with the copy pasting. I added the line with the $.post now. @MarmikBhatt Thanks, I have fixed it and know it works. I can't believe I have spent so many days on something that evident. By the way, do I need to specify method=POST in the form tag if I use $.post()? — Dambo, Oct 31 '15 at 22:32

score 0 · Answer 1 · answered Oct 31 '15 at 22:46

The first thing I noticed is that your

<input type='text' id='correct' id="correct">

contains id="correct" twice. I'm sure you meant to add name="correct".

When you use $("#colorTest").serialize(), that will return

responseText=foo&idNum=bar&correct=foobar

I can see how this would be used for a GET request. But seeing as you're using $.post(), you'll want to pass in an object of key/value pairs for your POST data.

For example, this should work:

var params = {
    responseText: 'foo',
    idNum: 'bar',
    correct: 'foobar'
};
$.post("testColor.php", params);

POST form with JQuery using $.post()

1 Answers1