Question

我已经阅读了很多像这个问题的门票，但似乎无法得到我想要的工作。所以我不得不问这一个。

我在HTML页面上有2个表单和2个按钮。两种形式都使用内联样式隐藏：style =＆＃34; display：none;＆＃34;

我想要做的是使用按钮1显示表单1并隐藏表单2，使用按钮2隐藏表单1并显示表单2。这是按钮1：

<button type="button" id="button7">Click Here If your Serial Number is 549999 or Below</button>

这是按钮2：

<button type="button" id="button8">Click Here If your Serial Number is 550000 or Above</button>

这是表格1：

<form name="lowsearch" id="lowsearch" method="post" action="action.html" target="formresponse" style="display:none;">
    <input TYPE="hidden" NAME="command" VALUE="search">
    <input TYPE="hidden" NAME="file" VALUE="Repair_Project/R&S2Web.db">
    <input TYPE="hidden" NAME="database" VALUE="Old_Serial">
    <input TYPE="hidden" NAME="searchfields" VALUE="S_Serial_No;S_Description">
        <p><b>Please enter your Serial Number</b></p>
            <input TYPE="text" size="10" name="S_Serial_No" id="S_Serial_No" required>
        <p><input TYPE="SUBMIT" NAME="b1" id="SUMBIT" VALUE="Find Device" class="buttonText"></p>
</form>

这是表格2：

    <form name="highsearch" id="highsearch" method="post" action="action.html" target="formresponse" style="display:none;">
    <input TYPE="hidden" NAME="command" VALUE="search">
    <input TYPE="hidden" NAME="file" VALUE="Repair_Project/R&S2Web.db">
    <input TYPE="hidden" NAME="database" VALUE="Serial">
    <input TYPE="hidden" NAME="searchfields" VALUE="S_Serial_No;S_Description">
        <p><b>Please enter your Serial Number</b></p>
            <input TYPE="text" size="10" name="S_Serial_No" id="S_Serial_No" required>
        <p><input TYPE="SUBMIT" NAME="b1" id="SUMBIT" VALUE="Find Device" class="buttonText"></p>
</form>

我的问题是我不知道如何完成Javascript以获得理想的效果。

<script>
function func(a) {
var el;
if(a === 1) {
    el = document.getElementById("lowsearch");
}
if(a === 2) {
    el = document.getElementById("highsearch");
}
document.getElementById('button7').onclick = function () {
    func(1);
};
document.getElementById('button8').onclick = function() {
    func(2)
};
</script>

Answer 1

您要做的是根据您要显示/隐藏的属性更改表单上的style属性。在if函数的func块内，您可以设置属性显示值。

function func(a) {
    if(a === 1) {
        document.getElementById("lowsearch").style.display = "block";
        document.getElementById("highsearch").style.display = "none";
    }
    if(a === 2) {
        document.getElementById("lowsearch").style.display = "none";
        document.getElementById("highsearch").style.display = "block";
    }
}

你可以在这个小提琴上查看它的一个例子：http://jsfiddle.net/thetimbanks/mzvkxr7d/

揭示＆amp;在隐藏的HTML表单之间切换

1 个答案: