Ajaxのフォームを送信し、PHP

Question

経由/電子メールを検証する私は、HTML連絡先フォームで作業して送信ボタンをクリックしたときにフォームを検証するために、以下のJavaScriptコードを使用しています：

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を使用しようとしています。私はフォームが検証されることを可能にする以下のコードを試しましたが、検証が成功してサブミットが再度クリックされると、ページはリロードされ、#success divに含まれる確認メッセージは表示されませんか？

$(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; 
}); 
});