Question

开始编辑***，但是更新的功能但是，单击“输入”不会触发第二个提交按钮。还要添加以下代码行：

document.getElementById('btn-default').removeAttribute("disabled");

以防用户想要切换回原始搜索按钮。编辑结束***

我有两个提交按钮，第一个是常规输入搜索框的默认按钮。但是，如果用户单击“高级”链接，它将隐藏常规搜索输入以及提交按钮。并显示“高级”提交按钮。当按下回车键时，它将默认为第一个提交按钮。有没有一种方法可以检测何时隐藏了提交按钮，使用显示的提交按钮？这是我下面的代码的一部分：

FORM：

<form id='searchGroup' class='form-inline mt-2 mt-md-0' action='test.php' method='POST'>
    <div class="col-md-5" id="defaultDisplay" >
            <input class='form-control mr-sm-2' type='text' placeholder='' aria-label='Search' name='SearchAll' autofocus='autofocus'>  

            <!-- STANDARD SEARCH BUTTON -->
            <input id='btn-default' class='btn btn-default my-2 my-sm-0' type='submit' name='SearchStd' value='Search'/>
    </div>


    <div class="collapse" id="collapseExample">

            <!-- MULTIPLE INPUTS HERE -->
            <!-- ADVANCED SEARCH BUTTON -->
            <input class='btn btn-primary' type='submit' name='SearchAdv' value='Search'/> 
    </div>
</form>

显示div的功能：

    <script>
function switchVisible() {
    if (document.getElementById('defaultDisplay')) {
        if (document.getElementById('defaultDisplay').style.display == 'none') {
            document.getElementById('defaultDisplay').style.display = 'block';
            document.getElementById('btn-default').removeAttribute("disabled");
        }
        else {
            document.getElementById('defaultDisplay').style.display = 'none';
            document.getElementById('btn-default').setAttribute("disabled", "disabled");
        }
    }
}
</script>

Answer 1

您可以做的一件事就是仅创建两种形式，一种用于基本搜索，一种用于高级搜索。然后在两者之间切换显示。这是一个很小的可忽略的冗余，可以解决此问题而无需诉诸JavaScript解决方法。

或者，对于简单和高级，只需使用一种形式，并且仅使用一个提交按钮。首先将表格视为高级表格。 “简单搜索”将只是具有空高级字段的高级搜索。

Answer 2

表单上任何带有TYPE =“ submit”的输入或按钮都将链接到ENTER键。值得注意的是，如果您有两个这样的输入具有TYPE =“ submit”，则第一个输入将在按下Enter键时触发。

一种解决方案是在不想按ENTER键触发的属性上设置DISABLED属性。

根据您的要求，首先要禁用“高级”提交按钮，因此请编辑HTML以包括如下所示的disabled属性：

<input class='btn btn-primary' type='submit' name='SearchAdv' value='Search' disabled="disabled" />

然后，当您执行代码以显示“高级”部分时，将“禁用”属性添加到“默认”部分的提交按钮：

document.querySelector('input[name="SearchStd"]').setAttribute('disabled','disabled');

同时从“高级”部分的按钮中删除DISABLED属性：

document.querySelector('input[name="SearchAdv"]').removeAttribute('disabled','disabled');

在此阶段，我应该指出，我注意到您的JavaScript代码的工作方式与我对您的应用的理解有所不同：

对于每个切换，您似乎都在说“如果默认搜索是显示块（如图所示），则将显示设置为无（隐藏），否则，如果没有显示，则显示它”

我很确定您打算切换“高级”部分，而不是“默认”部分（因为“默认”由DEFAULT显示！）。因此，假设这是正确的，并且假设您已经进行了上述HTML更改，并且假设您已经进行了CSS更改，以使#collapseExample开始显示NONE，那么您希望这样的JS：

<script>
    function switchVisible() {
        if (document.getElementById('collapseExample')) {
            if (document.getElementById('collapseExample').style.display == 'none') {
                document.getElementById('collapseExample').style.display = 'block';
                document.querySelector('input[name="SearchStd"]').setAttribute('disabled','disabled');
                document.querySelector('input[name="SearchAdv"]').removeAttribute('disabled','disabled');
            }
            else {
                document.getElementById('collapseExample').style.display = 'none';
                document.querySelector('input[name="SearchStd"]').removeAttribute('disabled','disabled');
                document.querySelector('input[name="SearchAdv"]').setAttribute('disabled','disabled');
            }
        }
    }
</script>

有一些方法可以改善这种情况，例如，您可以研究“缓存元素”，因此不必重复getElementById，并且可以将ID添加到实际输入中，这被认为是一种很好的做法。操作独特的元素，但要保持简单并回答您的实际问题，这是我的回答。祝你好运！

两个提交按钮，一个始终处于隐藏状态，如何按下Enter键并使用正确的提交按钮

2 个答案: