how to hide and show a div that is inside of a form using only javascript and css
Question
I have a form that has several divs within it grouping certain input fields together. I want to hide some of those divs (and the input fields within those divs) when the page initially loads. This is simple to do with the display:none attribute for css. Then, I want to show those hidden divs and their input fields when the user clicks on a show/hide button. I am using javascript and css only (no jquery) for this project.
I have a basic javascript function that alternately hides (display:none) or shows (display:block) the divs with the click of a button. The function works just fine when I use it on a test page where the divs are not part of a form. However, when I try to use this same function with the divs part of (ie inside) the form, it doesn't work. Actually, it appears to work, but then almost instantaneously reverts back to the initial state of the display setting. I have a feeling that the issue resides in the fact that my divs are inside a form, but I can't understand why that would be an issue. What should I do to correct this issue so that the divs within the form can hide/show with the toggle of a button.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
#random {
width: 600px;
min-height: 50px;
background-color:#E01418;
color:#B5F0B9;
display: block;
}
#hideshow {
width: 600px;
min-height: 50px;
background-color:#223FCD;
color:#F2D595;
display:block;
}
</style>
</head>
<body>
<form id="myform" name="myform" method="post" action="">
<div id="random">
<input type="text" id="firstname" name="firstname" placeholder="firstname">
<input type="text" id="lastname" name="lastname" placeholder="lastname">
<input type="email" id="email" name="email" placeholder="email">
</div>
<div id="hideshow">
<input type="password" id="password" name="password" placeholder="password">
<input type="text" id="address" name="address" placeholder="address">
<input type="text" id="phone" name="phone" placeholder="phone">
</div>
<input type="submit" id="submit" name="submit" value="Update">
<button id="togglehideshow">Hide/Show</button>
</form>
<script>
var button = document.getElementById('togglehideshow');
button.onclick = function() {
var div = document.getElementById('hideshow');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
};
</script>
</body>
</html>
One last thing - my button I'm using is NOT the submit button for the form. I just didn't want to confuse anyone with that. Thanks for your help in advance!
1 answers
solution1
0 ACCPTED 2015-07-16 17:11:47
Add type = button for the button that shows and hides the div.
<button type="button" id="togglehideshow">Hide/Show</button>
This is because the button tries to submit the form after hiding the div.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.