-2

ページを更新せずに電子メールのお問い合わせフォームを作成したい。だから私は自分のhtmlファイルにjqueryを追加しました。フィールドが空かどうかを確認するために、html必須属性を使用しました。しかし、html コードに jquery コードを追加すると、必要な属性が機能しません。以下は私のコードです。

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML5 Contact Form</title>
    <link rel="stylesheet" media="screen" href="styles.css" >

    <script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){

$('#submit').click(function(){

$.post("send.php", $("#mycontactform").serialize(),  function(response) {   
 $('#success').html(response);
 //$('#success').hide('slow');
});
return false;


});

});
</script>
</head>
<body>


<form id="mycontactform" class="contact_form" action="" method="post" name="contact_form">
    <ul>
        <li>
             <h2>Contact Us</h2>
             <span class="required_notification">* Denotes Required Field</span>
        </li>
        <li>
            <label for="name">Name:</label>
            <input type="text"  id="name"  name="name" placeholder="John Doe" required />
        </li>
        <li>
            <label for="email">Email:</label>
            <input type="email" name="email" id="email"  placeholder="john_doe@example.com" required />
            <span class="form_hint">Proper format "name@something.com"</span>
        </li>

        <li>
            <label for="message">Message:</label>
            <textarea name="message" id="message"  cols="40" rows="6" required ></textarea>
        </li>
        <li>
            <button class="submit"  id="submit"  style="cursor:pointer" type="submit">Submit Form</button>
            <div id="success" style="color:red;"></div>

        </li>
    </ul>
</form>

</body>
</html>

機能するには必要な属性が必要であり、そのjqueryコードも機能する必要があります。誰かが私を助けることができますか？

4

2 に答える 2

3

フォームの検証は、他の場所でトリガーしない限り、フォームのイベントでのみトリガーされsubmitます。代わりに、次のように AJAX を実行します。

$(document).ready(function(){
    $('#mycontactform').submit(function(e){
        e.preventDefault();
        $.post("send.php", $(this).serialize(), function(response) {   
            $('#success').html(response);
            //$('#success').hide('slow');
        });
    });
});
于 2013-07-22T15:46:32.737 に答える
2

ユーザーがフォームを送信したときではなく、ボタンをクリックしたときにAJAXリクエストを送信しています。ボタンではなく、フォームに変更.click()して添付します。.on('submit')

$('#mycontactform').on( 'submit', function () {
    ...

デモ: http://jsfiddle.net/QjPka/

于 2013-07-22T15:46:06.733 に答える