简体   繁体   English

使用按钮和JavaScript显示/隐藏表单

[英]Show/hide forms using buttons and JavaScript

I need to show a form using a button, and hide it when the user presses another button, because the other button shows another form. 我需要使用按钮显示表单,并在用户按下另一个按钮时隐藏它,因为另一个按钮显示另一个表单。 I did a similar thing with a select box, but I can't figure out how to do this. 我用选择框做了类似的事情,但我无法弄清楚如何做到这一点。

Use the following code fragment to hide the form on button click. 使用以下代码片段隐藏按钮单击时的表单。

document.getElementById("your form id").style.display="none";

And the following code to display it: 并显示以下代码:

document.getElementById("your form id").style.display="block";

Or you can use the same function for both purposes: 或者您可以将两个目的使用相同的功能:

function asd(a)
{
    if(a==1)
        document.getElementById("asd").style.display="none";
    else
        document.getElementById("asd").style.display="block";
}

And the HTML: 和HTML:

<form id="asd">form </form>
<button onclick="asd(1)">Hide</button>
<button onclick="asd(2)">Show</button>

There's something I bet you already heard about this! 我打赌你已经听说过这件事了! It's called jQuery . 它叫做jQuery

$("#button1").click(function() {
    $("#form1").show();
};

It's really easy and you can use CSS-like selectors and you can add animations. 它非常简单,你可以使用类似CSS的选择器,你可以添加动画。 It's really easy to learn. 这真的很容易学习。

If you have a container and two sub containers, you can do like this 如果你有一个容器和两个子容器,你可以这样做

jQuery jQuery的

    $("#previousbutton").click(function() {
    $("#form_sub_container1").show();
    $("#form_sub_container2").hide(); })

    $("#nextbutton").click(function() {
    $("#form_container").find(":hidden").show().next();
    $("#form_sub_container1").hide();
})

HTML HTML

     <div id="form_container">
            <div id="form_sub_container1" style="display: block;">
            </div>

            <div id="form_sub_container2" style="display: none;">
            </div>
     </div>

Would you want the same form with different parts, showing each part accordingly with a button? 你想要相同的表格和不同的部分,用按钮相应地显示每个部分吗?

Here an example with three steps, that is, three form parts, but it is expandable to any number of form parts. 这里有一个包含三个步骤的示例,即三个表单部分,但它可以扩展到任意数量的表单部分。 The HTML characters &laquo; HTML字符&laquo; and &raquo; &raquo; just print respectively « and » which might be interesting for the previous and next button characters. 只打印«和»,这可能是前一个和下一个按钮字符有趣。

 shows_form_part(1) /* this function shows form part [n] and hides the remaining form parts */ function shows_form_part(n){ var i = 1, p = document.getElementById("form_part"+1); while (p !== null){ if (i === n){ p.style.display = ""; } else{ p.style.display = "none"; } i++; p = document.getElementById("form_part"+i); } } /* this is called at the last step using info filled during the previous steps*/ function calc_sum() { var sum = parseInt(document.getElementById("num1").value) + parseInt(document.getElementById("num2").value) + parseInt(document.getElementById("num3").value); alert("The sum is: " + sum); } 
 <div id="form_part1"> Part 1<br> <input type="number" value="1" id="num1"><br> <button type="button" onclick="shows_form_part(2)">&raquo;</button> </div> <div id="form_part2"> Part 2<br> <input type="number" value="2" id="num2"><br> <button type="button" onclick="shows_form_part(1)">&laquo;</button> <button type="button" onclick="shows_form_part(3)">&raquo;</button> </div> <div id="form_part3"> Part 3<br> <input type="number" value="3" id="num3"><br> <button type="button" onclick="shows_form_part(2)">&laquo;</button> <button type="button" onclick="calc_sum()">Sum</button> </div> 

There's the global attribute called hidden . 有一个名为hidden的全局属性。 But I'm green to all this and maybe there was a reason it wasn't mentioned yet? 但我对这一切都很环保,也许还有一个原因还没有被提及呢?

 var someCondition = true; if (someCondition == true){ document.getElementById('hidden div').hidden = false; } 
 <div id="hidden div" hidden> stuff hidden by default </div> 

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/hidden https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/hidden

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM