POST формы с JQuery, используя $ .post()

Question

У меня есть следующие формы

<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> 

только значение для #responseText фактически набрано, #idNum передается с другой страницы, в то время как другие поля заполнены С помощью этой функции:

<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> 

А вот мой 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(); 
?> 

Теперь, я уверен, что PHP называется правильно когда событие click происходит на #confirm, потому что временная метка, вызываемая в php, записывается в моем db. Тем не менее, ни одно из значений в полях не передается в php. А именно, если это что-то вроде:

echo $_POST["idNum"]; 

Я возвращаюсь в пустое поле.

Кто-нибудь знает, что я делаю неправильно или какие-либо предложения по его отладке? Я проводил здесь дни без какого-либо прогресса.

Answer 1

Первое, что я заметил, что ваш

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

содержит id="correct" дважды. Я уверен, вы хотели добавить name="correct".

При использовании $("#colorTest").serialize(), который будет возвращать

responseText=foo&idNum=bar&correct=foobar 

Я могу видеть, как это будет использоваться для запроса GET. Но, видя, что вы используете $ .post(), вам нужно передать объект пары ключ/значение для ваших данных POST.

Например, это должно работать:

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