i have form has several divs within grouping input fields together. want hide of divs (and input fields within divs) when page loads. simple display:none attribute css. then, want show hidden divs , input fields when user clicks on show/hide button. using javascript , css (no jquery) project.
i have basic javascript function alternately hides (display:none) or shows (display:block) divs click of button. function works fine when use on test page divs not part of form. however, when try use same function divs part of (i.e. inside) form, doesn't work. actually, appears work, instantaneously reverts initial state of display setting. have feeling issue resides in fact divs inside form, can't understand why issue. should correct issue divs within form can hide/show toggle of 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 - button i'm using not submit button form. didn't want confuse that. in advance!
add type = button button shows , hides div.
<button type="button" id="togglehideshow">hide/show</button> this because button tries submit form after hiding div.
Comments
Post a Comment