form表单的另类提交

来源:互联网 发布:mac彻底卸载软件数据 编辑:程序博客网 时间:2024/06/05 06:21

传统中我可能都比较喜欢在Form表单中写<input type="submit" value="submit">,

但这不是唯一的,我们也可以在Button中以js事件提交表单,例如下面一段代码:


  <form action="" method="post">

        ......

<div class="col-sm-8" style="text-align: center">
<button type="button" class="btn btn-outline btn-primary" onclick="submitForm()"><fmt:message key="btn.save" bundle="${bundle }"/></button>
<button type="button" class="btn btn-default" onclick="cancel()"><fmt:message key="btn.cancel" bundle="${bundle }" /></button>
</div>
 </form>


<script>
        //使用Jquery动态执行文本栏中的校验
$('#code').change(function(){
var divCode = document.getElementById("div-code");
var len = document.getElementById("code").value.length;
divCode.className = "form-group";
if (len < 1) {
divCode.className = "form-group has-error";
}
});

$('#name').change(function(){
var div = document.getElementById("div-name");
var len = document.getElementById("name").value.length;
div.className = "form-group";
if (len < 1) {
div.className = "form-group has-error";
}
});

function submitForm() {//通过button按钮执行表单提交,而非input中type=submit
document.form1.submit();
};


function cancel() {//通过button 按钮点击事件执行跳转
document.write("<form action='unitList' method=post name=backform style='display:none'>");
document.write("</form>");
document.backform.submit();
};
</script>

1 0