admin管理员组

文章数量:1194550

Hi I'm having some trouble getting this to work, pretty simple all I am wanting to do is show a div once my html form is submitted.

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

Any help would be much appreciated thank you :)

Hi I'm having some trouble getting this to work, pretty simple all I am wanting to do is show a div once my html form is submitted.

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

Any help would be much appreciated thank you :)

  • javascript
  • html
  • forms
Share Improve this question asked Aug 23, 2011 at 4:07 JessicaJessica 4512 gold badges5 silver badges15 bronze badges 1
  • Move the onsubmit attribute to the form. Also, don't use "submit" as a form control name as it shaddows the form's submit method. In the above, form.submit will reference the control, not the method, so calling it will throw an error. – RobG Commented Aug 23, 2011 at 4:18
Add a comment  | 

3 Answers 3

Reset to default 17

I think you're just missing quotes around "hidden_div" in your document.getElementById("hidden_div") call!

But actually, your page is probably posting back, resetting the state of the page and thus leaving hidden_div seemingly always in a hidden state -- are you intending on handling the form submission via AJAX?

If you want to see the intended behavior, you should move the showHide() call to the <form> element, and return false after it:

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

and leave the submit button as:

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

Also note that you haven't self-closed the <input /> button tag, or given any text to show inside it.

you need to put showhide function on form onsubmit instead of input

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

you are also missing quotes as @Cory mentioned

I Hope this example works for you , I have used two different ways first One for Hiding Form and second One for Showing 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>

本文标签： javascriptHideShow Div after form submitStack Overflow

版权声明：本文标题：javascript - HideShow Div after form submit? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1738500881a2090262.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。