表单提交后如何隐藏/显示 Div？

Question

表单提交后如何隐藏/显示 Div？

7

你好，我在让这个工作时遇到了一些问题。很简单，我想做的就是在我的html表单提交后显示一个div。

<head>

<script type="text/javascript">
 function showHide() {
   var div = document.getElementById(hidden_div);
   if (div.style.display == 'none') {
     div.style.display = '';
   }
   else {
     div.style.display = 'none';
   }
 }
</script>

</head>


<body>

<form method="post" name="installer">

<label>Home Keyword</label>
<br />
<input type="text" name="hello" value="">
<br />
<input type="submit" value="" name="submit" onsubmit="showHide()">

</form>

<div id="hidden_div" style="display:none">
<p>Show me when form is submitted :) </p>
</div>

</body>

任何帮助都将不胜感激，谢谢 :)

- Jessica

将 onsubmit 属性移动到表单中。此外，不要使用“submit”作为表单控件名称，因为它会遮蔽表单的提交方法。在上述情况中，form.submit 将引用控件而非方法，因此调用它会抛出错误。 - RobG

3个回答

2

您需要将showhide函数放在表单的onsubmit中，而不是input中。

<form method="post" name="installer" onsubmit="showHide()">

正如 @Cory 提到的那样，你还缺少引号。

- Adeel

0

希望这个例子对你有用，我使用了两种不同的方法，第一种是隐藏表单，第二种是显示DIV。

  document.forms['myFirstForm'].addEventListener('submit', function(event) {
    // Do something with the form's data here
    this.style['display'] = 'none';
    event.preventDefault();
  }); 
   function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
  }

<form action="" class="m-md-5 px-md-5" method="post" name="myFirstForm">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <button type="submit" class="btn btn-primary w-100 mt-5" onclick="myFunction()">Submit</button>
</form>
<div id="myDIV" class="2" style="display:none">
  <h1>ThankYou</h1>
  <h6>We will get back to you shortly on the same.</h6>
</div>

- sachin vinay

这个问题已经存在多年了，所以在这个时候提交答案可能并不是很有用！ - JohnP

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Cᴏʀʏ · Accepted Answer

我认为你在document.getElementById("hidden_div")的调用中只是漏了"hidden_div"周围的引号！

但实际上，你的页面可能会提交后重新加载，重置页面状态，因此似乎始终处于隐藏状态--你打算通过AJAX处理表单提交吗？

如果你想看到预期的行为，你应该将showHide()调用移到<form>元素中，并在其后返回false：

<form method="post" name="installer" onsubmit="showHide(); return false;">

并将提交按钮保持为：

<input type="submit" value="" name="submit" />

请注意，您没有对<input />按钮标签进行自我关闭，也没有提供任何要显示在其中的文本。