如何在表格中加载 <div> 在按钮上单击使用HTML / JS
[英]how to load form in <div> on button click using HTML/ JS
问题描述
<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节，并希望使用JS根据上面部分中的按钮（单击）在下面部分（分区）中加载不同的表单，现在，我仅添加1个代码段，但我需要加载form_1，form_2等，按按钮单击button1，button2等。
2 个解决方案
解决方案1
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: 没有代码，无济于事，但总的流程是，您可以为不同的按钮分配onclick事件，并将表单的样式设置为：
display:none;
the onclick function should go something like onclick函数应该类似于
//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. 您需要使用此方法为2个按钮提供2种不同的功能。
解决方案2
0 已采纳 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.