$(this).serialize() 在 jQuery 验证 submitHandler 中不起作用答案

【问题标题】：$(this).serialize() not working in jQuery validate submitHandler$(this).serialize() 在 jQuery 验证 submitHandler 中不起作用
【发布时间】：2017-09-27 15:57:14
【问题描述】：

我有一种情况，我在我的应用程序的一个页面上多次使用相同的表单，它允许用户编辑或删除数据，但是当使用下面的 javascript 来监听表单提交时，页面只是刷新。

我打算使用$('.service_form').serialize() 提交表单，但是这样做时，它会序列化页面上每个表单的值并完成 ajax 请求，但是如果我使用$(this).serialize()，页面只会刷新。

HTML 表单

<div id="service_modal" class="modal fade">  
  <div class="modal-dialog">  
       <div class="modal-content">  
            <form class="service_form">                    
                <div class="modal-header">  
                     <button type="button" class="close" data-dismiss="modal">&times;</button>  
                </div>  
                <div class="modal-body">  
                    <div class='form-group has-feedback has-feedback-left'>
                        <label for="service_idno">IDNO:</label>
                        <input type="text" class="form-control required" id="service_idno" name="service_idno">
                    </div>                          
                    <div class='form-group has-feedback has-feedback-left'>
                        <label for="service_code">Service Code:</label>
                        <input type="text" class="form-control required" id="service_code" name="service_code">
                    </div>  
                    <div class='form-group has-feedback has-feedback-left'>
                        <label for="service_cost">Service Cost:</label>
                        <input type="number" class="form-control required" id="service_cost" name="service_cost">
                    </div>                          
                </div>  
                <div class="modal-footer">  
                       <input type="submit" value="Commit" class="btn btn-success" />  
                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
                </div>                      
           </form>                  
       </div>  
  </div>  
</div>

Javascript

$('.service_form').each(function(){ 
 $(this).validate({
    errorClass: 'validation-error-label',
    highlight: function(element, errorClass) {$(element).removeClass(errorClass);},
    errorPlacement: function(error, element){if (element.parents('div').hasClass('has-feedback')) {error.appendTo(element.parent() );}},
    rules:{vali: "required"},
    messages: { 
        service_idno: {required: "* Service IDNO Is Required."},    
        service_code: {required: "* Service Code Is Required."},    
        service_name: {required: "* Service Name Is Required."},    
        service_account: {required: "* Account Is Required."},  
        service_cost: {required: "* Cost Is Required."},    
        service_retail: {required: "* Retail Is Required."},            
    },                
    submitHandler: function(form) { 
        $.ajax({
            url: "rest/servicedelete.php",
            type: "POST",  
            data: $(this).serialize(),
            timeout:9000,
            beforeSend:function() {
                $('.modal').modal('hide');  
           },           
            success: function (data) {

            },  
            error:function() {
                $('#notification').html('Remote Service Currently Unavailable');    
           },       
        });     
    }                     
 });
});

我希望能够随时提交页面上的任何表单，并且只提交该数据。

【问题讨论】：

打开您的控制台并启用保留日志。再试一次。查找错误。

标签： javascript jquery ajax forms

【解决方案1】：

submitHandler() 的范围不是表单元素，因此this 不是您所期望的。请改用提供的form 参数：

data: $(form).serialize(),

【讨论】：

哇，我以前试过这个，它似乎也没有工作，但现在似乎工作了..
不知道为什么有人觉得有必要对此投反对票
是的，对此也不确定，这是迄今为止最短和最简单的解决方案。非常感谢您的帮助

【解决方案2】：

首先你需要将当前表单存储在一个临时变量中，比如

    $('.service_form').each(function(){ 
       var form = $(this);

然后你像

一样进行序列化

    data: $(form).serialize(),

这将解决您的问题。

【讨论】：