如何在同一部分中切换和隐藏两种不同的表单
请帮助是：我想在一个部分中有两个表单，如果单击按钮，第一个表单将可见，如果单击第二个按钮，第二个表单将可见，而第一个表单隐藏，这将打开同一部分。我如何实现这个目标
慕尼黑的夜晚无繁华浏览 92回答 1
1回答
-
茅侃侃
首先，很高兴包括您到目前为止所尝试过的内容，也许还有一些您正在使用的代码，但无论如何我都会尽力帮助您。它允许您将onClick处理程序分配给一对单选按钮。然后，我简单地调整了处理程序以显示和隐藏相应的表单。我已经评论了您需要更改以添加自己的表单的代码部分，但目前每个表单只有一个测试输入和提交按钮。<head> <script type="text/javascript"> function switchForms() { var sz = document.forms['formSelector'].elements['form']; // loop through list for (var i=0, len=sz.length; i<len; i++) { sz[i].onclick = function() { // assign onclick handler function to each // change the 'display' style property of the forms to show and hide them var display; var dntDisplay; if (this.value == 1) { display = 1; dntDisplay = 2; }else{ display = 2; dntDisplay = 1; } document.getElementById('form' + display).style.display = "block"; document.getElementById('form' + dntDisplay).style.display = "none"; }; } } </script></head><body onload="switchForms()"> <form action="#" method="post" class="formSelector" id="formSelector"> <fieldset> <legend>Change form on-click</legend> <p>Select your form: <label><input type="radio" name="form" value="1" checked="checked" /> Form 1</label> <label><input type="radio" name="form" value="2" /> Form 2</label> </p> </fieldset><br> </form> <form id="form1" method="post" action=""> <h2>Form 1</h2> <!-- Insert any input fields you want for form 1 here --> <label>Input: <input type="text" name="total" class="num" value="" /></label> <button name="sbt=form1" type="submit">Submit</button> </form> <form id="form2" method="post" style="display:none" action=""> <h2>Form 2</h2> <!-- Insert any input fields you want for form 2 here --> <label>Input: <input type="text" name="total" class="num" value="" /></label> <button name="sbt-form2" type="submit">Submit</button> </form> </body>
随时随地看视频慕课网APP
相关分类
JavaScript