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

Question

BEGINNING OF EDITED*** Updated function, however, hitting "enter" doesn't trigger the second submit button. Also adding this line of code:

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

in case the user wants to switch back to the original search button instead. END OF EDIT ***

I have two submit buttons, the first one is the default for a general input search box. However, if the user clicks on the "Advance" link it will hide the general search input along with the submit button. And display the "Advance" submit button. When hitting enter it will default to the first submit button. Is there a way to detect when a submit button is hidden, to use the submit button that is displayed? Here is part of my code below:

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>

FUNCTION to display 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

One thing you could do is to just create two forms , one for basic search and one for advanced search. Then toggle the display between the two. It's a small, negligible redundancy that would fix this issue without resorting to JavaScript workarounds.

Alternatively, just use one form for both simple and advanced , and only having one submit button . Treat your form as an advanced form to begin with. A "simple search" would simply be an advanced search with empty advanced fields.

Answer 2

Any input or button on the form with TYPE="submit" will be linked to the ENTER key. Notably in your case, if two such inputs have the TYPE="submit", the first one will be triggered on enter keypress.

One solution could be to set the DISABLED attribute on the one you do not want to trigger on ENTER keypress.

According to your requirement, you want the 'Advanced' submit button to be disabled to begin with, so edit your HTML to include the disabled property like this:

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

Then, when you execute the code to show the 'Advanced' section, add the Disabled attribute to the 'default' section submit button:

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

while at the same time removing the DISABLED attribute from the 'advanced' section's button:

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

At this stage, I should mention I have noticed that your JavaScript code is working in a slightly different manner to how I understand your app to work:

It seems you are saying for each toggle "if the DEFAULT search is display block (shown), set display none (hide it), otherwise if it is not shown, show it"

I'm pretty sure you planned to be toggling the Advanced section, not the Default section (as the Default is shown by DEFAULT!). So assuming this is true and assuming you already made the HTML change mentioned above, AND assuming you've made a CSS change so that #collapseExample has display NONE to begin with... you'd want you JS like this:

<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>

There are some ways to improve this by the way, for example you could look into "caching elements" so you don't have to repeat the getElementById's, and you could add IDs to the actual inputs which is considered good practice when manipulating unique elements, but to keep it simple and answer your actual question, this is my answer. Good luck!