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屋！