jquery - Send selectbox value to php variables without page relaoding -

im learning ajax reading online tutorials, please understand new ajax , programming in general. have managed following 3 selectboxes:

• populates selectbox 2 based on selection selectbox 1
• populates selectbox 3 based on selection selectbox 2

everything working perfectly

here code:

$(document).ready(function() {  $(".sport").change(function()  {   var id=$(this).val();   var datastring = 'id='+ id;    $.ajax   ({    type: "post",    url: "get_sport.php",    datatype : 'html',    data: datastring,    cache: false,    success: function(html)    {       $(".tournament").html(html);    }     });   });    $(".tournament").change(function()  {   var id=$(this).val();   var datastring = 'id='+ id;    $.ajax   ({    type: "post",    url: "get_round.php",    data: datastring,    cache: false,    success: function(html)    {     $(".round").html(html);    }     });   });  }); </script> 

here example

what want do

• i send value of 3 selectboxes 3 php variables without form reloading.

my problem

when user clicks submit:

1. the form reloads (which dont want)
2. the selectbox values not send php variables

my code values after submit clicked follows:

if(isset($_post['submit'])){ $a = $_post['sport']; $b = $_post['tournament']; : } 

however code flawed mentioned above.

if 1 can me explain how send form data 3 php variables without form reloading appreciated

if don't want submit form when click button, need set input button , not submit. can, also, attach submit event handler form , prevent submit:

$("form").on("submit", function(e){   e.preventdefault(); //this 1 option   return false; //this option (and return true if want submit it). }); 

so, being said this, like:

$("form").on("submit", function(e) {   var formdata = $(this).serialize();   e.preventdefault();   $.ajax({     url: 'yoururl',     data: formdata,     type: 'post', //based on have in backend side     success: function(data) {       //whatever want once server returns success response     }    }); }); 

in backend:

if (isset($_post["sport"])) {   //do sport } if (isset($_post["tournament"])) {   //do torunament }  echo "successfull response!"; //you have "write" in response , frontend going receive. 

hope helps!