javascript - PHP / Ajax Contact Form Redirecting to PHP File -
i'm in middle of developing contact form portfolio i'm working on , when click submit button send message, instead of displaying bootstrap alert message below form, page redirects php file.
i'm receiving email in inbox form after submitting valid details though i'm using ajax i'm still getting redirected.
example @ http://nickcookweb.co.uk/#contact.
edit: preventdefault(); doesn't seem working @ all.
html:
<form id="contactform" name="contactform" action="contact.php" method="post"> <input type="text" name="name" id="name" placeholder="full name (required)" required/> <input type="email" name="email" id="email" placeholder="email (required)" required/> <input type="tel" name="tel" id="tel" placeholder="contact number"/> <textarea type="text" name="message" id="message" placeholder="message (required)" required></textarea> <button type="submit" id="sendbutton" class="button">send<span class="fa fa-paper-plane" aria-hidden="true" style="margin-left:6px; top:2px"></span></button> </form> <div id="contactsuccess" class="alert alert-success"> <span> <p>message sent successfully.</p> </span> </div> <div id="contacterror" class="alert alert-danger"> <span> <p>there error sending message. please try again.</p> </span> </div>
php:
<?php $to = "contact@nickcookweb.co.uk"; $from = $_request['email']; $name = $_request['name']; $message = $_request['message']; $headers = "from: $from"; $subject = "new message via portfolio"; $fields = array(); $fields{"name"} = "name"; $fields{"email"} = "email"; $fields{"tel"} = "tel"; $fields{"message"} = "message"; $body = "details:"; foreach($fields $a => $b) { $body .= sprintf("%20s: %s\n",$b,$_request[$a]); } $send = mail($to, $subject, $body, $headers); ?>
js:
$(function() { $('#contactform').validate({ rules: { name: { required: true, minlength: 2 }, email: { required: true, email: true }, tel: { required: true }, message: { required: true, minlength: 10 } }, messages: { name: { required: "please provide name", minlength: "your name must @ least 2 characters long" }, email: { required: "please provide email address" }, message: { required: "please enter message", minlength: "your message must @ least 10 character long" }, }, submithandler: function(form) { $(form).ajaxsubmit({ type:"post", data: $(form).serialize(), url:"contact.php", success: function() { $('#contactform :input').attr('disabled', 'disabled'); $('#contactform').fadeto( "slow", 0.15, function() { $(this).find(':input').attr('disabled', 'disabled'); $(this).find('label').css('cursor','default'); $('#contactsuccess').fadein(); }); }, error: function() { $('#contactform').fadeto( "slow", 0.15, function() { $('#contacterror').fadein(); }); } }); } }); });
$('#yourbutton').on('click', function{ event.preventdefault(); //do ajax , on success show msg })
Comments
Post a Comment