CODEWITHSUNDEEP
javascriptjqueryhtmlforms
GrumpyCrouton
GrumpyCrouton

Reputation: 8621

Submit form with first button which is enabled in a form with multiple buttons

I have a form which has 3 different buttons that are enabled/disabled at different times.

<html>
    <form method="GET">
        <input type="text" name="test"/>
        <button name="submit1" type="submit">Submit</button>
        <button disabled name="submit2" type="submit">Submit</button>
        <button disabled name="submit3" type="submit">Submit</button>
    </form>
</html>

By default, the first button is enabled. If my focus is inside of a form element, and I press enter, this button is triggered and it submits the form, the other buttons are disabled.

However, if I enable the 2nd button and disable the 1st button, the form does not submit at all when I press enter.

How can I make the enter key submit the form using the first button which is not disabled? On any given tab, the user will only be able to see a single submit button, and it will be the ONLY submit button on the whole page which is enabled.

Upvotes: 2

Views: 335

Answers (2)

Sparker73
Sparker73

Reputation: 313

The only reason I see for having only one form action and several submit buttons is when we want to do extra tasks just before submitting the form.

I have been on that situation before and a solution would be simple. To start, there is no reason to have multiple submit buttons if, in the end, the form action is only one, so my suggestion is to keep the idea of a default hidden submit button but with an ID to target it and trigger a click event on it.

You can try this sample code I have created in TryIt Editor Sample code

I have commented out the submit action in all three event handlers to avoid page reload caused by the form submission. You will see that it is possible to have an instance of the form inside each tab content and there is a selector for the form inside its tab, it is commented out just in case that is your use case but if that is the case you must remove the form instance outside the tabs just to avoid troubles even if document.querySelector('#' + tabName + 'multi-submit-form') targets only the first occurrence.

I hope this answer illustrate de idea and flexibility of having as many controls you might want but only one submit that can be triggered when you need.

Upvotes: 0

crenshaw-dev
crenshaw-dev

Reputation: 8364

One workaround is to place a hidden submit button at the top of the form that can always handle the enter key event.

<form method="GET">
    <button hidden type="submit"></button>
    <input type="text" name="test"/>
    <button disabled name="submit1" type="submit">Submit</button>
    <button name="submit2" type="submit">Submit</button>
</form>

Upvotes: 2

Related Questions