how to load form in <div> on button click using HTML/ JS
Question
<html> <body> <section> <div> <section class="upper"> <ul> <li> <a href="#">Menu <ul> <li><a href="#" id="button1" class="button1">Button1</a> <li><a href="#" id="button2" class="button2">Button2</a> <li><a href="#" id="button3" class="button3">Button3</a> </ul> </a> </li> </ul> </section> </div> <div> <section class="lower"> <div class="loadForm" id = "loadForm"> </div> </section> </div> </section> <form action="#" id="form_1" method="post" name="form_1" style="display:none"> <div class="nameDiv" style="alignment-adjust:auto; margin-left:auto; margin-top:auto"> <div id="infoPopup"> <span>Select Name</span> <input id="nameFile" name="nameFile" type="file"> <input type="button" id="submit" name="submit" value="Ok"/> <input type="button" id="cancel" name="cancel" value="Cancel" /> </div> </div> </form> <script type="text/javascript"> $(document).ready(function(){ /* $("#button1").click(function() { $("#form_1").show(); }); */ }); </script> </body> </html>
i have created 2 section one above other and want to load different forms in lower section ( division in section) depending on buttons (click) from above section using JS Right now, i'm adding snippet for 1 for only but i need to load form_1, form_2 and so on as per the button click button1, button2 and so on.
2 answers
solution1
0 2018-05-07 09:26:56
Without codes, can't help much but the general flow is that you can assign the onclick events for the different buttons and setting the style of the form to:
display:none;
the onclick function should go something like
//remember to set the form id for this to work
function foo(){
document.getElementById("form id here").style.display = "block";
//if you need to show only one then use set the other one to none
document.getElementById("the other form id here").style.display = "none";
}
you need 2 different function for 2 buttons using this method.
solution2
0 ACCPTED 2018-05-07 10:11:47
Try this.
<html> <body> <section> <div> <section class="upper"> <ul> <li> <a href="#">Menu <ul> <li><a href="#" id="button1" class="button1" onclick="displayform1()">Button1</a> <li><a href="#" id="button2" class="button2" onclick="displayform2()">Button2</a> <li><a href="#" id="button3" class="button3" onclick="displayform3()">Button3</a> </ul> </a> </li> </ul> </section> </div> <div> <section class="lower"> <div class="loadForm" id = "loadForm"> </div> </section> </div> </section> <form action="#" id="form_1" method="post" name="form_1" style="display:none"> <div class="nameDiv" style="alignment-adjust:auto; margin-left:auto; margin-top:auto"> <div id="infoPopup"> <span>Select Name</span> <input id="nameFile" name="nameFile" type="file"> <input type="button" id="submit" name="submit" value="Ok"/> <input type="button" id="cancel" name="cancel" value="Cancel" /> </div> </div> </form> <script type="text/javascript"> function displayform1(){ document.getElementById("form_1").style.display = "block"; document.getElementById("form_2").style.display = "none"; } function displayform2(){ document.getElementById("form_1").style.display = "none"; document.getElementById("form_2").style.display = "block"; } //excluded the 3rd one </script> </body> </html>
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.