All geek questions in one place

Hide / Show Div after submitting the form?

Hi, I have some problems for this to work, the pretty simple thing I want to do is show the div after submitting my html form.

<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 greatly appreciated, thanks :)

+6
source share
2 answers

I think you are simply skipping quotes around "hidden_div" in your call to document.getElementById("hidden_div") !

But in fact, your page is probably sent back, resetting the page state and leaving hidden_div seemingly always in a hidden state - are you going to handle submitting the form via AJAX?

If you want to see the intended behavior, you must move the showHide() call to the <form> element and return it 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 did not close the <input /> button tag or did not receive any text displayed inside it.

+16
source

you need to put showhide function in showhide form instead of input

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

you also lack quotes as mentioned in @Cory

+2
source

Source: https://habr.com/ru/post/895645/

More articles:


All Articles