Question

我想向您展示我的代码并试着了解为什么它会在第一次提交后两次发送表单。

我正在使用课程＆＃34;保存＆＃34;我检查表单ID并提交它，但是在我保存一个寄存器并尝试保存一个新的并且这个新的将会通过两次。

我的模态：

<div class="modal fade" id="form_organization" role="dialog">
<div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title info">New organization</h4>
        </div>
        <div class="modal-body">                     
           <form class="form-horizontal" id="new_save" name="new_save">
                <fieldset>
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="name_company">Name</label>  
                        <div class="col-md-6">
                            <input type="text" id="name_company" name="name_company" class="form-control input-md" required="" />
                        </div>
                    </div>                      
                    <div class="modal-footer">
                        <div class="form-group">
                            <label class="col-md-4 control-label"></label>
                            <div class="col-md-8">
                                <button class="btn btn-success save" type="submit" id="comapny_save"><span class="glyphicon glyphicon-ok"></span> Save</button>  
                                <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="glyphicon glyphicon-remove"></i> Close </button>
                            </div>
                        </div>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>
</div>

我的Jquery / JS功能：

var $save = $(".save");

 $save.on("click", function () {                            
    var id_form = $(this).closest("form").attr('id');
    var id_modal = $(this).closest(".modal").attr('id');
        submitForm(id_form, id_modal);

});

function submitForm(form, modal) {
    $("#"+form).submit(function (e) {
                e.preventDefault();
                var action = form.substring(0, form.indexOf("_"));
                var table = form.replace(action + "_", "");

                $.post('./include/save.php?table=' + table + '&action=' + action, {
                            dataForm: $("#"+form).serialize()
                                }, function (data) {
                                    if (data == "success") {
                                        $table.bootstrapTable('refresh', {
                                            url: './include/refresh.php'
                                        });                                        

                                        $("#" + modal).modal('toggle');
                    $("#" + form)[0].reset();
                                        dlgSuccess();

                                    } else {
                                        dlgError();
                                    }
                                });
                            });
                        }

谢谢大家的时间。

Answer 1

在第一次点击后设置提交事件处理程序。此后，每次单击都会注册一个额外的提交处理程序（以及其他AJAX请求）。

相反，忘记click事件并注册一个提交事件处理程序。

orderdate

Answer 2

type=submit ...

按钮的默认操作

<button class="btn btn-success save" type="submit" id="comapny_save">
  <span class="glyphicon glyphicon-ok"></span> Save
</button>

...是提交表格。简单的解决方案是设置type to a button。我个人喜欢尽可能少地处理javascript事件，特别是当它可以通过正确的 html来补救时。

<button class="btn btn-success save" type="button" id="comapny_save">
  <span class="glyphicon glyphicon-ok"></span> Save
</button>

ps：comapny_save似乎没有拼写正确。

Answer 3

通过$('#form').off('submit')取消您的提交然后再打开

喜欢这样

$('#form').off('submit').on('submit', function(e){
  e.preventDefault();
  //do something
});

表格在模态提交两次

3 个答案: