0

フォームが送信された後、フォームをリセットして元の空白の値を表示したいと考えています。コードは次のとおりです。

    PHP Form
    <form action="index.php" method="post" id="contact_form" >
    <div id="topic_error" class="error"><img src="images/error.png" /> What category should this be filed in?</div>
    <div>
        <select name="topic" id="topic">
            <option value="">Please select a topic...</option>
            <option value=" Computer Repair ">Computer Repair</option>
            <option value=" Website Design ">Website Design</option>
            <option value=" Say Hi ">Just Want to Say Hi</option>
        </select>
    </div>
    <h4>NAME:</h4><div id="name_error" class="error"><img src="iamges/error.png" /> Please enter your name</div>
    <div><input class="contact_name" type="text" name="name" id="name" placeholder="Enter Name" /></div>
    <H4>EMAIL:</H4><div id="email_error" class="error"><img src="images/error.png" /> Please enter your email</div>
    <div><input class="contact_email" type="text" name="email" id="email" placeholder="you@mail.com" /></div>
    <h4>SUBJECT:</h4><div id="subject_error" class="error"><img src="images/error.png" /> Please enter a subject</div>
    <div><input class="contact_subject" type="text" name="subject" id="subject" placeholder="How did you become so awesome?" /></div>
    <h4>MESSAGE:</h4><div id="message_error" class="error"><img src="images/error.png" /> Please give us a few more details</div>
    <div><textarea class="contact_message" name="message" id="message" placeholder="Give us some details"></textarea></div>
    <div id="mail_success" class="success"><img src="images/success.png" /> Thank you. The mailman is on his way.</div>
    <div id="mail_fail" class="error"><img src="images/error.png" /> Sorry, we don't know what happened. Please try again later.</div>

    <div id="cf_submit_p">
        <input class="submit" type="submit" id="send_message" value="">
    </div>
</form>

contact.js ファイル

$(document).ready(function(){
    $('#send_message').click(function(e){
        e.preventDefault();
        var error = false;
        var topic = $('#topic').val();
        var name = $('#name').val();
        var email = $('#email').val();
        var subject = $('#subject').val();
        var message = $('#message').val();
        if(topic.length == 0){
            var error = true;
            $('#topic_error').fadeIn(500);
        } else {
            $('#topic_error').fadeOut(500);
        }
        if(name.length == 0){
            var error = true;
            $('#name_error').fadeIn(500);
        } else {
            $('#name_error').fadeOut(500);
        }
        if(email.length == 0 || email.indexOf('@') == '-1'){
            var error = true;
            $('#email_error').fadeIn(500);
        } else {
            $('#email_error').fadeOut(500);
        }
        if(subject.length == 0){
            var error = true;
            $('#subject_error').fadeIn(500);
        } else {
            $('#subject_error').fadeOut(500);
        }
        if(message.length == 0){
            var error = true;
            $('#message_error').fadeIn(500);
        } else {
            $('#message_error').fadeOut(500);
        } if(error == false){
            $('#send_message').attr({'disabled' : 'true', 'value' : 'Sending...' });
            $.post("send_email.php", $("#contact_form").serialize(),function(result){
                if(result == 'sent'){
                    $('#cf_submit_p').remove();
                    $('#mail_success').fadeIn(500);
                } else {
                    $('#mail_fail').fadeIn(500);
                    $('#send_message').removeAttr('disabled').attr('value', 'Send Message');
                }
            });
        }
    });
});

send_email.php ファイルは必要ないと思いますが、必要に応じてここに置くことができます。これは、javascriptの何らかのトリガーで実行できると思います(あなたが想定したときに何が起こるかはわかっています)。form.trigger('reset');行の後に行を追加しようとしましたが、うまくいき$('#mail_success').fadeIn(500);ませんでした

4

2 に答える 2