提交后重置我的表单

Question

提交表单后，我想重置表单以显示原始空白值。代码如下：

    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 中的某种触发器来完成。我确实尝试在 $('#mail_success').fadeIn(500); 行之后添加行 form.trigger('reset'); 但这不起作用

Answer 1

应该是$("#contact_form").trigger("reset")，$("#contact_form")[0].reset() 也应该可以工作。

Answer 2

$('#contact_form').trigger('reset') 应该可以工作。