jquery - Php Form Submit without Refresh - Ajax not working -

i trying get form submit without having page refreshing everytime

however, when insert ajax , place php new file form doesnt submit , dont understand why?

any advice appreicated!

php

<?php if(isset($_post['name'], $_post['email'], $_post['phone'], $_post['message'])){     //post data     $name = $_post['name'];     $email = $_post['email'];     $phone = $_post['phone'];     $message = $_post['message'];     //mail settings     $to = "arshdsoni@gmail.com";     $subject = 'soni repairs - support request';     $body = <<<email  hi there!  name $name.  message: $message.  email is: $email phone number: $phone  kind regards email;      $header = "from: $email";      if($_post) {         if($name == '' || $email == '' || $phone == '' || $message == '') {             echo $feedback = "<font color='red'> *please fill in fields!";         }         else {             mail($to, $subject, $body, $header);             echo $feedback = "<font color='green'> *message sent! receive reply shortly!";         }     }  }  else{     echo $feedback = "<font color='red'> missing params"; }  ?> 

ajax

<script src="http://code.jquery.com/jquery-latest.js"></script>         <script>             $(document).ready(function(){                  $("#submitbtn").click(function( event ) {                     //values                     var name=document.getelementbyid('name').value;                     var email=document.getelementbyid('email').value;                     var phone=document.getelementbyid('phone').value;                     var message=document.getelementbyid('message').value;                     var occasion=document.getelementbyid('occasion').value;                     var datastring = $("#contact").serialize();                      $.ajax({                         type:"post",                         url:"php.php",                         data: datastring,                         success: function(html) {                             $('#feedback').html(html);                         }                     });                   event.preventdefault();                 });             });         </script> 

html code here: http://www.codeply.com/go/e3jao1wrpl

the .bind() function may way go form, since binds action of clicking button event handler.

it may beneficial have event.preventdefault() before ajax call.

            $(document).ready(function(){             $("#submitbtn").bind([boundelement],function( event ) {                 event.preventdefault();                 var name=document.getelementbyid('name').value;                 var email=document.getelementbyid('email').value;                 var phone=document.getelementbyid('phone').value;                 var message=document.getelementbyid('message').value;                 var occasion=document.getelementbyid('occasion').value;                 var datastring = $("#contact").serialize();                  $.ajax({                     type:"post",                     url:"php.php",                     data: datastring,                     success: function(html) {                         $('#feedback').html(html);                     }                 });              return true;             });         }); 

i recommend double-checking syntax bound element in .bind() parameters. single quote marks referring named form element example html: