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

Question

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

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

如果用户想切换回原始搜索按钮。 编辑结束***

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

形成：

<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，这在处理唯一元素时被认为是一种很好的做法。 ，但为了简单起见并回答您的实际问题，这是我的答案。 祝好运！