javascript - html中有多个form标签,每一个form标签下对应一个submit,为什么未输入内容的form表单也会提交?
本文介绍了javascript - html中有多个form标签,每一个form标签下对应一个submit,为什么未输入内容的form表单也会提交?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
我在一个html页面中有以下三个完全重复的form表单(三个form表单主要是为了显示不同的内容):
html:
我是利用ajax将form表单的值提交到后台的:
js:
当我在第一个form下的
<input class="commentMsgInput" name="comment" type="text" value=""/>
输入完值后,点击对应的<input class="commentMsgSubmit" name="submit" type="submit" value=""/>
时是正常的,控制台打印如下:
但当我在第二个form下的
<input class="commentMsgInput" name="comment" type="text" value=""/>
输入值并进行对应的submit提交时,出现了如下问题:
即此时未出入值的第一个表单也进行了提交.
我也尝试过给每一个form都添加一个id:
如下:
<form id="form1" class="commentForm" method="post" action="http://localhost:8088/lesson/comment.php">
<form id="form2" class="commentForm" method="post" action="http://localhost:8088/lesson/comment.php">
<form id="form3" class="commentForm" method="post" action="http://localhost:8088/lesson/comment.php" >
但是输入的结果和之前未加id的一样呢。
解决方案
写了一个你这个问题的最小demo,发现并没有这个问题。你可以看看这个跟你写的内容有什么不一样,我猜可能是你写的form嵌套了 http://codepen.io/quietcoder/...
这篇关于javascript - html中有多个form标签,每一个form标签下对应一个submit,为什么未输入内容的form表单也会提交?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文