使用jQuery提交表单后调用重置方法失效该如何解决？

问题排查方案和解决方法 #

• 修正回调内的语法错误
  你当前success回调中多句代码使用逗号(,)分隔是错误写法，JavaScript语句需使用分号(;)分隔，错误的分隔符会导致后续重置代码未正常执行。
• 校验表单选择器是否匹配
  确认页面内表单的id属性严格为contactForm，id大小写敏感且页面内不能存在重复id。可在success回调内加入console.log($('#contactForm').length)验证，如果输出为0则代表未选中目标表单。
• 明确reset()方法的实际作用
  原生表单的reset()方法只会将表单元素恢复为页面加载完成时的初始值，不会直接清空所有输入。如果你页面加载后通过JS给输入框预设过值，或是输入框的value属性本身写有默认内容，reset()不会将其清空。需要强制清空可替换为以下代码：

  $('#contactForm').find('input, textarea, select').val('')
  

• 检查是否有阻止重置的事件绑定
  排查你是否给contactForm绑定过reset事件监听，且事件内存在e.preventDefault()这类阻止默认行为的逻辑，如有就会导致reset调用失效。

修正后完整示例代码 #

$('#contactForm').submit(function(e){
    e.preventDefault();
    $('#loading').css("display", "block");

    $.ajax({
        type : "POST",
        url : "/contact/",
        data: {
            sender_name : $('#name').val(),
            sender_email : $('#email').val(),
            message_subject : $('#subject').val(),
            message_text : $('#message').val(),
            csrfmiddlewaretoken : csrftoken,
            datatype : "json",
        },

        success: function(){
            $('#loading').css("display", "none");
            $('#sent-message').css("display", "block");
            const targetForm = $('#contactForm');
            if(targetForm.length) {
                // 优先用原生reset
                targetForm[0].reset();
                // 原生reset不符合需求就换成强制清空
                // targetForm.find('input, textarea, select').val('');
            }
        },
    });
});

内容的提问来源于stack exchange，提问作者Omid Shojaee