兩個提交按鈕，一個始終處於隱藏狀態，如何按下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，這在處理唯一元素時被認為是一種很好的做法。 ，但為了簡單起見並回答您的實際問題，這是我的答案。 祝好運！