Force form to send certain submit button through (when there are multiple) when ENTER key pressed

Question

I have a form with two submit buttons, name="submit_button" and name="search_me_logo" , and when the form arrives at the action location, it does two different things depending on which button was pressed.

When the enter key is pressed, I want it to do the same thing as the name="submit_button" but right now it seems to be sending the name="search_me_logo" by default.

Here's the HTML code you need:

<form action="/search_me.php" method="GET">
    <div id="search_me_outer_div">
        <button id="search_me_div" name="search_me_logo" type="submit">
            <img id="search_me_image" src="/images/header/search_icons/search_me.png" height="33" alt='"search me"'/>
        </button>
    </div><!--
    --><div id="search_box_outer_div">
        <div id="search_box_div">
            <input id="search_box" onfocus="hidePlaceholderAndShineBox();" onblur="showPlaceholderAndBlurBox();" name="search" type="text" spellcheck="false" size="32" placeholder='Get to know Sam... "search me"'>
            <button id="search_div" name="submit_button" type="submit">
                <img id="search_img" src="images/header/search_icons/fancy_search.png" height="21" alt="Go"/>
            </button>
        </div>
    </div>
</form>

PHP:

if (isset($_GET['submit_button'])) {
    echo 'submit was pressed<br>';
} else if (isset($_GET['search_me_logo'])) {
    echo 'logo was pressed<br>';
} else if (isset($_GET['search'])) {
echo 'enter was pressed<br>';
} else {
    //show error page
}

Right now when I press enter, it echo s "logo was pressed". There is probably a way with JavaScript, but if it's possible simply with HTML/PHP, that would be wonderful.

Answer 1

By default, hitting the enter key will cause the first submit button. You can simply add the default submit action in a hidden div right at the beginning of the form. For example:

<form action="/search_me.php" method="GET">
<div style="height:0px; width:0px; overflow:hidden;"><button id="search_div" name="submit_button" type="submit"></button></div>

and keep the rest as is.

Edit: some browsers won't let the enter key to trigger the first button if it's not displayed (eg display:none;).

However it will work with:

width: 0;
height: 0;
overflow: hidden;

In the CSS of the element that contains the hidden submit button.

Answer 2

Thanks for all the suggestions. @NoGray's answer could work or I just did two forms, as @Irdrah suggested.

Each forms' buttons and inputs had different names, and one of the inputs had a type="hidden" and id="hidden_input" . Then when the submit for the form with the hidden input was clicked, I used jquery's submit() to set

document.getElementById('hidden_input').value = document.getElementById('shown_input').value;`

and return ed true . I haven't tried @NoGray's but I'm sure it would work.