Question

我写了一个表单，其中的字段需要在成功提交后重置。整个流程通过ajax和php进行。这是代码：
HTML

<form role="form" class="contact-form" id="contact-fm" method="post">
                            <div class="form-group">
                                <div class="controls">
                                    <input type="text" placeholder="Name" class="requiredField" name="name" required>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="controls">
                                    <input type="email" class="email" class="requiredField" placeholder="Email" name="email" required>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="controls">
                                    <input type="text" class="requiredField" placeholder="Subject" name="subject" required>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="controls">
                                    <textarea rows="7" placeholder="Message" name="message" class="requiredField" required></textarea>
                                </div>
                            </div>
                            <button type="submit" id="submit" class="btn-system btn-large">Send</button>
                            <div id="success" style="color:#34495e;"></div>
                        </form>

AJAX

$(function() {

    $("input,textarea").jqBootstrapValidation({
        preventSubmit: true,
        submitError: function($form, event, errors) {
            // additional error messages or events
        },
        submitSuccess: function($form, event) {
            event.preventDefault(); // prevent default submit behaviour
            // get values from FORM
            var name = $("input#name").val();
            var email = $("input#email").val();
            var sub = $("input#subject").val();
            var message = $("textarea#message").val();
            $.ajax({
                url: "php/send.php",
                type: "POST",
                data: {
                    name: name,
                    email: email,
                    sub: subject,
                    message: message
                },
                cache: false,
            })
            document.getElementById('contact-fm').reset();
        },
    });
});

PHP

<?php 
    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['message'];
    $subject = $_POST['subject'];

    $to = 'ajay.k@enexl.com';
    if (filter_var($email, FILTER_VALIDATE_EMAIL)) { // this line checks that we have a valid email address
        $mailSubject = "Contact request from " .$name;
        $txt = "name : ".$name.".\n\nSubject : ".$subject.".\n\nMail id : ".$email."\n\nMessage : ".$message;
        $headers = "From: ".$email ;
        mail($to,$mailSubject,$txt,$headers);
        $data = array();
        $data['status'] = 'success';
        //echo json_encode($data);  
        echo "<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>";
        echo "<p id='text'>Your email was sent! One of our team members would contact you shortly!</p>"; // success message
        echo "<script type='text/javascript'>";
        echo "$(function(){";
        echo "$('#text').fadeOut(5000);";  
        echo "});";
        echo "</script>";
    }
    else{
        echo "<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>";
        echo "<p id='textOne'>Mail was not sent, make sure that all fields are filled in!</p>"; // success message
        echo "<script type='text/javascript'>";
        echo "$(function(){";
        echo "$('#textOne').fadeOut(5000);";  
        echo "});";
        echo "</script>";
    }

?>

当我使用document.getElementById('contact-fm').reset();时，表单不会被重置。如何重置？

Answer 1

Ajax调用确实有一个函数，可以在ajax调用成功时使用。

 $.ajax({
     url: "php/send.php",
     type: "POST",
     data: {
                    name: name,
                    email: email,
                    sub: subject,
                    message: message
            },
                cache: false,
            })
.done(function( data ) {
    document.getElementById('contact-fm').reset();
  });

Answer 2

尝试

$('#contact-fm').on('click', function()
        { 
            $('#contact-fm').find('input:text, input:password, select, textarea').val('');
            $('#contact-fm').find('input:radio, input:checkbox').prop('checked', false);
        });

然后使用Jquery Trigger

触发它

$("#contact-fm").trigger("reset");

更多关于http://www.codesynthesis.co.uk/code-snippets/clearing-and-resetting-forms-with-jquery

Answer 3

上述答案都不适合我。我决定在echo "$('#contact-fm').trigger('reset');";代码echo "$('#text').fadeOut(5000);";之后使用php。然后它奏效了。

Answer 4

$(function() {

    $("input,textarea").jqBootstrapValidation({
        preventSubmit: true,
        submitError: function($form, event, errors) {
            // additional error messages or events
        },
        submitSuccess: function($form, event) {
            event.preventDefault(); // prevent default submit behaviour

            $.ajax({
                url: "php/send.php",
                type: "POST",
                data: $('#contact-fm').serialize(),
                cache: false
            }).done(function(data){
                $('#contact-fm')[0].reset();
            })

        },
    });
});

成功提交后重置表单字段

4 个答案: