AJAX JQuery POST Not Working

Question

I am unable to read the POST values I expect in my PHP script. The request goes through it just does not serialize the data properly into the POST request aspect of it all. There is a moderate amount of code and I would rather you skip this than downvote it as I need help desperately and I know many of you do not wish to spend your time answering this long of a question.

HTML:

JQuery and AJAX:

  $(document).arrive("#enrollPhase1", function() {
  // Auto Correct Questions
  $("#SecurityQuestion1").on("change", function() {
      if(this.value === $("#SecurityQuestion2").val()) {
        // Notify that same question will not fly with us
      } else {
        // If something changes and they are no longer the same, remove all errors
      }
  })

  $("#SecurityQuestion2").on("change", function() {
    if(this.value === $("#SecurityQuestion1").val()) {
      // Notify that same question will not fly with us
    } else {
      // If something changes and they are no longer the same, remove all errors
    }
  })

  // Get EnrollPhase1 Form...
  var EnrollPhase1Form = $('#enrollPhase1');

  $(EnrollPhase1Form).submit(function(event) {
    // Catch Browser Submitting Form
    event.preventDefault();

    // Temp Hold Security Question IDs to check for same question
    var SQ1 = $("#SecurityQuestion1").find(":selected").val();
    var SQ2 = $("#SecurityQuestion2").find(":selected").val();

    if(SQ1 === SQ2) {
      // Same question issue 
      return;
    }

    // Temp Hold Security Question Answers to check for same answer
    var SA1 = $("#SecurityAnswer1").val();
    var SA2 = $("#SecurityAnswer2").val();

    if(SA1 === SA2) {
      // Same answer issue
      return;
    }

    // Hide UsernameForm...
    $("#enrollPhase1Container").hide();

    // Error Message Response Removal
    $(".success, .error, .warning, .info").remove();

    // Start animationSpin
    $("#animationSpin").removeClass("hidden");

    // Serialize the form data
    alert(JSON.stringify(EnrollPhase1Form));
    var formData = $(EnrollPhase1Form).serialize();

    // Submit the form using AJAX.
    $.ajax({
        type: $(EnrollPhase1Form).attr('method'),
        url: $(EnrollPhase1Form).attr('action'),
        data: formData,

        statusCode: {
          500: function() {
            // Done animationSpin
            $("#animationSpin").addClass("hidden");

            // Error Message Callback
            $(".status").append("×" + "Server Returned 500 Error Code
" + "");

            // Show Form Again
            $("#enrollPhase1Container").show();
          }
        }
    })

    .done(function(response) {
        window.setTimeout(function(){
            $("#animationSpin").addClass("hidden");

            if(response == "REFRESH") {
              location.reload();
            } else if(response.startsWith("Error")) {
              // Error Message Adding
              $(".status").append("" +
              "×" + response.replace("Error", "") + "");

              // Increase height
              $("#loginContainer").height("70%");

              // Show Form Again
              $("#enrollPhase1Container").show();
            } else {
              // Remove UsernameForm...
              $("#enrollPhase1Container").remove();

              // Decrease height
              $("#loginContainer").height("50%");

              // Set the message text.
              $("#login").append(response);
            }
        }, 1000)
    })
});
});

enrollphase1.php:

// Do we have
var_dump($_POST);

IncredibleHat · Accepted Answer

You forgot the name attribute on all your form elements. They are still required for .serialize (so it can give a post variable its name for the value). So adjust your form elements:

Now when you get them from the $_POST array, you should see them as:

$_POST['SecurityQuestion1']
$_POST['SecurityAnswer1']
$_POST['SecurityQuestion2']
$_POST['SecurityAnswer2']

As a side note, your usage of selectors in the jquery is a bit, odd. I would suggest you change to the following (for just these lines):

$("#enrollPhase1").submit(function(event) {
    ....
    $.ajax({
        type: $(this).attr('method'),
        url: $(this).attr('action'),
        data: $(this).serialize(),
    ....

AJAX JQuery POST Not Working

HTML:

JQuery and AJAX:

enrollphase1.php:

Answers (1)

Related Questions