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

Popular posts from this blog

jOOQ update returning clause with Oracle -

java - Warning equals/hashCode on @Data annotation lombok with inheritance -

java - BasicPathUsageException: Cannot join to attribute of basic type -