Ajax，jQuery和PHP

Question

I have a jQuery form which I created as follows

<div data-role="page" id="page3" data-theme="d" >

<div data-role="header">
 <h1 style="font-family: 'Open Sans Condensed', sans-serif;font-  size:23px">LetsAllSave</h1>

<div data-role="content">

<form action="passenger.php" data class="ui-body ui-body-a ui-corner-all" method="post" id="passengerfrmsignup" >

<fieldset>
  <div data-role="fieldcontain">
    <label for="name">
      <em>* </em> Name: </label>
      <input type="text" id="name" placeholder="Name, at least 5 characters"
        name="name" class="required" minlength=5 data-mini="true" onkeyup="this.value=this.value.replace(/[^A-Za-z]/g,'');"/>
  </div>
  <div data-role="fieldcontain">
    <label for="surname">
      <em>* </em> Surname: </label>
      <input type="text" id="surname" placeholder="Surname, at least 5 characters"
        name="surname" class="required" minlength=5 data-mini="true" onkeyup="this.value=this.value.replace(/[^A-Za-z]/g,'');"/>
  </div>
  <div data-role="fieldcontain">
    <label for="phone">
      <em>* </em> Phone: </label>
      <input type="tel" id="phone" placeholder="phone format: 05xxxxxxxxx"
        name="phone" class="required" number=true   minlength="11" maxlength="11" data-mini="true"/>
  </div>
  <div data-role="fieldcontain">
    <label for="email">
      <em>* </em> Email: </label>
      <input type="text" id="email" placeholder="eg. [e-mail]"
        name="email" class="required email" data-mini="true"/>
  </div>

  <div data-role="fieldcontain">
    <label for="password"> 
      <em>* </em>Password: </label>
      <input type="password" id="password" placeholder="At least 5 character password"
        name="password" class="required" minlength=5 data-mini="true"/>
  </div>
   <div id="container">  </div> 
  <div class="ui-body ui-body-b">
    <input  type="submit" value="Register"
      id="pass-signup" data-theme="d"/>
  </div>
</fieldset>
</form>

I also have the passenger.php file as follows just to keep it simple:

<?php 

if (isset($_POST['name'],$_POST['surname'],$_POST['phone'],
$_POST['email'],$_POST['password'])) {
print_r($_POST);
}
else echo "data not set"; 

?>

NOTE: I validated my form inputs as follows:

$( "#passengerfrmsignup" ).validate({
submitHandler: function( form ) {
    $.ajax({
        type: $form.attr('method'),
        url: $form.attr('action'),
        data: $form.serialize(),
        dataType : 'json'
    success: function(data) {
            console.log(data);
           alert("successful");
        }
    });
return false; // required to block normal submit since you used ajax



 }
 }); 

Using jquery.form-validator.min.js and it's working fine. However, after all the fields are correctly filled and the form submitted the passenger.php file returns "data not set".

What might be the problem? I have done a lot of research in vain.

Answer 1

Because JQuery .serialize() return URL params (name=test&surname=cool), you need to specify type: "POST" in your AJAX request.

You can also check your param with $_REQUEST instead of $_GET to check that you are able to see your variables server side.