js表单提交

Question

我的项目功能只要对表单的增删改查功能, 在处理添加和编辑时发现问题

无论是添加还是编辑我都需要调一个模态框, 而且是同一个模态框(因为不想写多个), 因此在编辑和添加之间反复点击后提交无法正确的提交, 例如明明想编辑变成了添加

下图是点击添加时的模态框

下图是点击编辑时的模态框(选项都相同, 只是编辑时需要填入数据)

我的代码是这样的:

html

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    // ....
    <form id="myModal-form">
      <div class="modal-body">
        <!-- tab栏 -->
        // ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="submit" class="btn btn-primary">保存</button>
      </div>
    </form>
  </div>

添加功能的js

    $('.page-content-header .site-add').click(function () {
        $('#myModal-2').modal('show');
        $('#myModal-form').validate({
            rules: {...},
            // 验证通过提交表单
            submitHandler: function () {...} // 这是一个jquery-validate验证插件
        })
    })

编辑功能的js

    $('#temp-layout').on('click', '.amend', function () {
        $('#myModal-2').modal('show');
        $('#myModal-form').validate({
            rules: {...},
            submitHandler: function () {...} 
        })
    })

问题: 当我点击编辑时触发点击事件, 模态框显示, 这时不提交直接取消, 再点击添加后填入表单数据调用的接口确实编辑的接口

请问在还是调用同一个模态框的前提下, 有什么办法解决现在的问题

Answer 1

取消的时候，destroy你的模态框试试。怕数据残留。没有你的完整代码，只能一步一步排查

Answer 2

自己好好查代码，这有什么好问的，打断点单步调试。

Answer 3

你点击取消应该有一个回调函数去销毁这个数据