Ajax представить форму и подтвердить/электронную почту с помощью PHP

Question

Я работаю на HTML контактную форму и с помощью яваскрипта кода ниже, чтобы проверить форму, когда кнопка отправить кнопки:

function leftValue(e, t, n) { 
$(this).text(t.parent()[0].style.left) 
} 
$(document).ready(function() { 
required = ["name", "email"]; 
email = $("#email"); 
errornotice = $("#error"); 
emptyerror = "Required Field"; 
emailerror = "Required Field"; 
$("#contact-us").submit(function() { 
for (i = 0; i < required.length; i++) { 
    var e = $("#" + required[i]); 
    if (e.val() == "" || e.val() == emptyerror) { 
     e.addClass("form-error"); 
     e.val(emptyerror); 
     errornotice.fadeIn(750) 
    } else { 
     e.removeClass("form-error") 
    } 
} 
if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA- Z0-9]{2,4})+$/.test(email.val())) { 
    email.addClass("form-error"); 
    email.val(emailerror) 
} 
if ($(":input").hasClass("form-error")) { 
    return false 
} else { 
    errornotice.hide(); 
    return true 
} 
}); 
$("input").focus(function() { 
if ($(this).hasClass("form-error")) { 
    $(this).val(""); 
    $(this).removeClass("form-error") 
} 
}) 
}); 

HTML

<form action="" method="post" name="contact-us" id="contact-us"> 
<input type="text" id="name" name="name"/> 
<input type="text" id="email" name="email"/> 
</form> 
<div id="success">Thank you for your message!</div> 

После проверки передается и кнопка отправки нажата снова, данные размещены с помощью PHP и по электронной почте, используя этот код:

<?php 
if(isset($_POST['submit'])) 
{ 
$to="test@test.com"; 
$name=$_REQUEST['name']; 
$email=$_REQUEST['email']; 
$body="Name: $name \n\n Email Address: $email \n\n"; 
$sent=mail($to, $body); 
} 
?> 

Я пытаюсь использовать ajax для выполнения этих функций и отображать подтверждающее сообщение на одной странице без перезагрузки. Я пробовал приведенный ниже код, который позволяет проверять форму, но когда повторная проверка и передача будут снова нажаты, страница просто перезагружается и не отображает сообщение с подтверждением, содержащееся в div #success.

$(document).ready(function() { 
$("#contact-us").submit({ 
submitHandler: function() { 
$.post("<?php echo $_SERVER[PHP_SELF]; ?>", //post 
     $("#contact-us").serialize(), 
     function(data){ 
      if (data == 'Sent') { 
      $("#success").fadeIn(); 

     } 
     // 
    }); 
    return false; 
} 
}); 
}); 

Answer 1

вы попробуете ли это: event.preventDefault();

$(document).ready(function() { 
$("#contact-us").submit(function(event) { 

event.preventDefault(); 

$.post("<?php echo $_SERVER[PHP_SELF]; ?>", //post 
     $("#contact-us").serialize(), 
     function(data){ 
      if (data == 'Sent') { 
      $("#success").fadeIn(); 

     } 
    }); 
    return false; 
}); 
});