Question

我的问题是，即使我单击表单中的字段，而不仅仅是提交按钮事件，带有javascript onclick事件的提交按钮也会被触发。

<html>
<body>

<div id="showKontakt" style="position: absolute; top: 40px; left:33%; display:none">
<form class="formoid-solid-blue" style="background-color:#FFFFFF;font-size:14px;font-family:'Roboto',Arial,Helvetica,sans-serif;color:#34495E;max-width:680px;min-width:150px" method="post"><div class="title"> 
<h2>Kontaktformular</h2></div>
<div class="element-name"><label class="title"><span class="required">*</span></label><span class="nameFirst"><input placeholder=" Vorname" type="text" size="8" name="name[first]" required="required"/><span class="icon-place"></span></span><span class="nameLast"><input placeholder=" Nachname" type="text" size="14" name="name[last]" required="required"/></div>

<button class="submit" style="margin-left: 33%; width: 175px; margin-bottom:20px"><input type="submit" value="Absenden" onclick="closeFrame()"/> 
</button></form>
</div>
<button style="text-align: center;width:60%;margin-left:20%" onclick="setVisibility('showKontakt', 'inline');">Jetzt informieren</button>
<script language="JavaScript">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>

<script type="text/javascript">
function closeFrame() {
document.getElementById("showKontakt").style.display="none";
}
</script>

</body>
</html>

预期结果：仅当我单击提交按钮时，表单才会关闭。

实际结果：当我单击输入字段时，表单也会关闭。

Answer 1

没有理由在button内提交输入。试试吧，因为我认为那是你假装的

function closeFrame() {
  document.getElementById("showKontakt").style.display="none";
}

<form name="myForm">
  <div id="showKontakt">
    Name: <input type="text" name="fname">
  </div>
  <input type="submit" value="Absenden" onclick="closeFrame()"/> 
</form>

如果您不想使按钮消失，可以创建一个按钮，但是要在表单之外

function closeFrame() {
  document.getElementById("showKontakt").style.display="none";
}

<form name="myForm">
  <div id="showKontakt">
    Name: <input type="text" name="fname">
  </div>
</form>

<button onclick="closeFrame()">Absenden</button>

提交按钮Javascript关闭任何按钮上的表单，而不仅仅是提交

1 个答案: