Question

我有两个按钮说CITIZEN和POLICE。当我点击按钮CITIZEN时，我想在同一页面上显示一个表格CITIZEN_FORM。当我点击POLICE按钮时，我想在同一页面上显示一个表格POLICE_FORM。

如何使用JavaScript和HTML执行此操作？

Answer 1

这应该对你有用

HTML： -

<form id = "policeForm" action="" style="display:none">
  <input type="submit" value="Police Form">
</form>
<form id = "citizenForm" action="" style="display:none">
  <input type="submit" value="Citizen Form">
</form>
<button id= "citizenBtn" onclick="showForm('citizenForm')">citizen</button>
<button id="police" onclick="showForm('policeForm')">police</button>

的Javascript

var showForm = function(id){
  document.getElementById(id).style.display = '';
}

Answer 2

这样的东西？：

<script>
    $("input").click(function(){
        var mode = $(this).val();
        if(mode == "citizen"){
            $("#form_citizen").css("display", "block");
            $("#form_police").css("display", "none");
        }else if (mode == "police"){
            $("#form_citizen").css("display", "none");
            $("#form_police").css("display", "block");
        }
    });
</script>


<div id="panel">
    <input type="button" name="citizen" value="citizen" />
    <input type="button" name="police" value="police" />
</div>

<form id="form_police">....</form>
<form id="form_citizen">...</form>

但实际上stackoverflow不是＆＃34;我不知道怎么写我的代码 - 请为我做它＆＃34;网站。你应该自己尝试一下，如果你失败了，我们会帮忙。

我刚编写了一个简短的帮助，使用jQuery来处理样式。

格尔茨

Answer 3

Here's a simple JSFiddle。

只需隐藏表单开头，然后将事件监听器添加到按钮以显示相关表单。在这里我点击按钮后隐藏按钮，因为这似乎对这种应用程序有意义......

HTML：

<button id="a">Form A</button><button id="b">Form B</button>
<form id="a_form" name="a" style="display:none;">
    <input name="a_input" value="A: type here"/>
    <input type="submit"/>
</form>
<form id="b_form" name="b" style="display:none;">
    <input name="b_input" value="B: type here"/>
    <input type="submit"/>
</form>

使用Javascript：

var a=document.getElementById('a');
var b=document.getElementById('b');
a.addEventListener('click',function(){
    a.style.display="none";
    b.style.display="none";
    document.getElementById('a_form').style.display="";
});
b.addEventListener('click',function(){
    a.style.display="none";
    b.style.display="none";
    document.getElementById('b_form').style.display="";
});

使用JavaScript单击不同按钮时，不同的表单显示在同一页面上

3 个答案: