the form on website simple contact form. form show "success & failed" message on same page when form sent/failed without reloading page. understand should use ajax can't work because knowledge little.
here code i'm working with.
html (single page design):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script> <form class="form" id="contactus" action="" method="post" accept-charset="utf-8"> <label for="nametag">namn<font color="#ff0060">*</font></label> <input name="name" type="text" id="name" value="" /> <label for="emailtag">email<font color="#ff0060">*</font></label> <input name="email" type="text" id="email" value="" /> <label for="phonetag">telefon</label> <input name="phone" type="text" id="phone" value="" /> <label for="messagetag">meddelande<font color="#ff0060">*</font></label></br> <textarea name="message" id="message" style="width: 87%; height: 200px;"></textarea> <label class="placeholder"> </label> <button class="submit" name="submit">skicka</button> </form> <script> $(function() { $('#contactus').submit(function (event) { event.preventdefault(); event.returnvalue = false; $.ajax({ type: 'post', url: 'php/mail.php', data: $('#contactus').serialize(), success: function(res) {alert(res); if (res == 'successful') { $('#status').html('sent').slidedown(); } else { $('#status').html('failed').slidedown(); } }, error: function () { $('#status').html('failed').slidedown(); } }); }); }); </script> php:
<?php $name = $_post['name']; $email = $_post['email']; $phone = $_post['phone']; $message = $_post['message']; $recipient = "info@mydomain.com"; $subject = "webbkontakt"; $formcontent = "från: $name <br/> email: $email <br/> telefon: $phone <br/> meddelande: $message"; $headers = "from: " ."camaxon<info@mydomain.com>" . "\r\n"; $headers .= "reply-to: ". "no-reply@mydomain.com" . "\r\n"; $headers .= "mime-version: 1.0\r\n"; $headers .= "content-type: text/html; charset=utf-8\r\n"; if(mail($recipient, $subject, $formcontent, $headers)) { echo "successful"; } else { echo "error"; } ?>
your ajax call not working properly. try
$(function() { $('#contactus').submit(function (event) { event.preventdefault(); event.returnvalue = false; $.ajax({ type: 'post', url: 'php/mail.php', data: $('#contactus').serialize(), success: function(res) { if (res == 'successful') { $('#status').html('sent').slidedown(); } else { $('#status').html('failed').slidedown(); } }, error: function () { $('#status').html('failed').slidedown(); } }); }); }); also can see have used $('#contactus').serialize() way dont need pass form elements 1 one instead serialize() pass whole form elements php page
than in php file echo successful if went else echo error if response error show error div
<?php $name = $_post['name']; $email = $_post['email']; $phone = $_post['phone']; $message = $_post['message']; $recipient = "info@mydomain.com"; $subject = "webbkontakt"; $formcontent = "från: $name <br/> email: $email <br/> telefon: $phone <br/> meddelande: $message"; $headers = "from: " ."camaxon<info@mydomain.com>" . "\r\n"; $headers .= "reply-to: ". "no-reply@mydomain.com" . "\r\n"; $headers .= "mime-version: 1.0\r\n"; $headers .= "content-type: text/html; charset=iso-8859-1\r\n"; if(mail($recipient, $subject, $formcontent, $headers)) { echo "successful"; } else { echo "error"; } ?> 
Comments
Post a Comment