layui表单提交了多次的两个原因

layui表单提交时出现提交多次的原因

1. js文件引用了多次

使用layui需要引用layui.js，有的会引用layui.all.js。

如果使用layui默认的表单提交方式，且你的上述js文件同时引用，或者重复引用，那么就会导致表单渲染多次，就会导致表单提交多次的情况。

// layui监听提交
  form.on('submit(demo1)', function(data){
    layer.alert(JSON.stringify(data.field), {
      title: '最终的提交信息'
    })
    return false;
  });

引用的时候，注意不要同时引用layui.js和layui.all.js。如果自己的页面需要引入其他的页面，那么也要注意你需要引入的页面中是否已经引用过layui.js了，避免重复引用。

2. 触发提交操作的事件出现在<form></form>内

如果你是通过自己实现触发事件来提交的，那么你触发事件的提交按钮不能再form标签内。

例如有如下代码

<form class="form-horizontal layui-form" role="form"  lay-filter="example">
	<label for="username" class="col-sm-4 control-label">姓名：
        <input type="text" name="username" id="username" value="" class="form-control">
    </label>
	<button class="layui-btn btn-info" id="submit">提交</button>
</form>
<script>
	$("#submit").click(function () {
        var username = $("#username").val();
        $.ajax(.....);   // 省略ajax提交
    });
</script>

触发提交事件的按钮是在<form>标签内部的，所以当点击提交之后，也会触发两次提交。

将提交按钮放到<form>标签外就可以防止多次提交了。