AJAX 表单 $('form')[0].reset();在提交不清除值。我错过了什么？

Question

提前感谢您提供的任何帮助。我只是在学习 jQuery 和 AJAX，希望对以下代码有所帮助。所有验证规则都有效，表单提交并且页面不刷新。问题是表单值在提交触发后没有清除/重置为默认值。想法？

**********已编辑以包含 HTML 标记****************

        <div id="form">
            <h1 class="title">Contact Us</h1><!-- title ends -->
            <p class="contactUs">Ask about our services and request a quote today!</p><!-- contactUs ends -->

            <div id="success"><p>Your message was sent successfully.  Thank you.</p></div>

                <p id="required">* All fields required.</p>

                    <form name="form" id="contactMe" method="post" action="process.php" onSubmit="return validateForm()" enctype="multipart/form-data">
                        <input class="txt" type="text" maxlength="50" size="50" required name="name" value="<?php echo $_GET['name'];?>" placeholder="Name" />
                            <div id="nameError"><p>Your name is required.</p></div>
                        <input class="txt" type="text" maxlength="50" size="50" required name="email" value="<?php echo $_GET['email'];?>" placeholder="Email Address" />
                            <div id="emailError"><p>A valid email address is required.</p></div>
                        <textarea name="message" rows="6" cols="40" required placeholder="Message"></textarea>
                            <div id="messageError"><p>A message is required.</p></div>
                        <input type="hidden" maxlength="80" size="50" id="complete" name="complete" placeholder="Please Keep This Field Empty" />
                    <input type="submit" value="SUBMIT" name="submit" />
                <input type="reset" value="RESET" name="reset" />
        </form>
        </div><!-- form ends -->




//hide form submit success message by default.  to be shown on successfull ajax submission only. 
$(document).ready(function() {
    if ($('#success').is(':visible')){
        $(this).hide()
        }
});


//form validation
function validateForm() {

//name
var a=document.forms["form"]["name"].value;
if (a==null || a=="")
  {
      $('#nameError').fadeIn(250);
  return false;
  }

//email address
var c=document.forms["form"]["email"].value;
var atpos=c.indexOf("@");
var dotpos=c.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=c.length)
  {
      $('#emailError').fadeIn(250);
  return false;
  }

//message
var e=document.forms["form"]["message"].value;
if (e==null || e=="")
  {
      $('#messageError').fadeIn(250);
  return false;
  }
}//javascript form validation ends


//ajax submit and clear form on success
$(function () {


    $('form').on('submit', function (e) {

        var myForm = validateForm();                

        if (myForm == false){
            e.preventDefault();//stop submission for safari if fields empty
        }
        else{

          $.ajax({
            type: 'post',
            url: 'process.php',
            data: $('form').serialize(),
            success: function () {
                $('#success').fadeIn(250);
                if ($('#nameError, #emailError, #messageError').is(':visible')) {
                    $('#nameError, #emailError, #messageError').fadeOut(250);
                    }
                $('form')[0].reset();//clear form after submit success
            }//success ends
          });//ajax ends
        e.preventDefault();//prevent default page refresh
        }//else ends
        });//submit ends

});//function ends

//if reset button is clicked AND messages displayed, remove all form html messages
$(document).ready(function() {

    $('#form input[type="reset"]').click(function() {
        if ($('#success, #nameError, #emailError, #messageError').is(':visible')) {
            $('#success, #nameError, #emailError, #messageError').fadeOut(250);
        }
    });
    });

Answer 1

通过输入id="reset" 和/或name="reset"，您实际上覆盖了表单的form.reset 方法，因为这样做您使form.reset 定位到重置按钮。只需给它一个不同的 id 和 name 值。

永远不要给元素 name 或 id 属性与 dom 节点的属性名称相同。