H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【Web前端问题】js表单提交

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

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

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

clipboard.png

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

clipboard.png

我的代码是这样的:

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 () {...} 
        })
    })

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

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

回答:

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

回答:

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

回答:

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

本文地址:H5W3 » 【Web前端问题】js表单提交

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址