php - Contact form without refresh -

I am trying to create this form to display errors or confirmation messages without refreshing a page.

I am trying to use jQuery but have not had any success. My jQuery code is completely incorrect and I have tried to make it so many times so far.

Can someone point me in the right direction?

HTML

& lt; Form method = "post" action = "index.php" autocomplete = "on" & gt; & Lt; Label & gt; Name & lt; / Labels & gt; & Lt; Input name = "name" placeholder = "What is your name?" & Gt; & Lt; Label & gt; Email & lt; / Labels & gt; & Lt; Input name = "email" type = "email" placeholder = "your email please" & gt; & Lt; Label & gt; Message & lt; / Labels & gt; & Lt; Textarea rows = "10" name = "message" placeholder = "What would you say?" & Gt; & Lt; / Textarea & gt; & Lt; Label & gt; * What is 2 + 2? (Anti Spam) & lt; / Labels & gt; & Lt; Input name = "human" placeholder = "write here" & gt; & Lt; Input id = "submit" name = "submit" type = "submit" value = "submit" & gt; & Lt; / Form & gt;

PHP

  & lt ;? Php $ name = $ _POST ['name']; $ Email = $ _POST ['email']; $ Message = $ _POST ['message']; $ From = 'to: deleted'; $ = 'Deleted'; $ Theme = 'from: deleted'; $ Human = $ _POST ['human']; $ Body = "From: $ name \ nEmail: $ email \ nMessage: \ n $ message"; If ($ _POST ['submit']) {if ($ name! = '' & 'Amp; $ email! =' ') {If ($ human ==' 4 ') {if (mail ($ to $, $ Subject, $ body, $)) {echo '& lt; P & gt; Your message has been sent! & Lt; / P & gt; '; } Else {echo & lt; P & gt; Something went wrong, go back and try again! & Lt; / P & gt; '; }} And if ($ _POST ['submit'] and $ human! = '4') {echo & lt; P & gt; You answered incorrectly to the anti-spam question! & Lt; / P & gt; '; }} Else {echo & lt; P & gt; You need to fill up all the required fields !! & Lt; / P & gt; '; }}? & Gt; View from jQuery at $ .post  

You may have one such form:

  & lt; Form id = "form" & gt; & Lt; Label = "field" & gt; Field & lt; / Label & gt; & Lt; Br / & gt; & Lt; Input name = "field" id = "field" placeholder = "field" /> & Lt; Span id = "responseField" & gt; & Lt; / Span & gt; & Lt; Br / & gt; & Lt; Br / & gt; & Lt; Input type = 'submit' value = 'send!' / & Gt; & Lt; / Form & gt;  

A PHP check like this:

  $ json = array ("status" = & gt; "OK", "error" = & gt; []); If there is every field here (// isset ($ _ POST ['field']) / test {// test if "field" is ok (preg_match ("/ ^ [a-zA-Z0-9] + $ / ", $ _POST ['field'])) {$ json ['status'] =" no "; $ Jason ['Error'] ['Field'] = "Should be Alphanumeric"; }} And $ Jason ['status'] = "no"; Echo json_encode ($ json); Go out();  

and a JS like that

  $ (document) .on ("ready", function () {$ ("# form"). (Function () {var url = "check.php"; $ .post (url, {field: $ ("# field"). Val ()}, function (data) {var json = $ .parseJSON (data ); If (json.status == "OK") warning ("Everything is OK!"); And $ ("# responsefield") .html (json.error.field || "");}); Return Return;});});  

What will happen: you send the "field" value, it is checked in PHP (here, only one alphanumeric probe you want). As you check the form, fill out the $ json variable After this, your JS will check if everything is okay or not, then it will print in spin after your feedback field.

For more portability, check Jason's answer, it sends the full form automatically, which is better than the creation of the object to send it also checks that the Ajax request fails, Which is a very good habit, understands my code the simplest of how AJAX requests work.