CODEWITHSUNDEEP
htmlforms
neuquen
neuquen

Reputation: 4169

Enter key action when multiple submit buttons exist on a single form

I'm running into a strange issue where Internet Explorer is adding an additional query string parameter that no other browser adds.

The page has a form with auto-submit functionality and a "Reset Filters" button. When a user hits the enter key, it forces the submit. When a user hits enter in Internet Explorer, for some reason the "Reset Filters" operation is selected rather than the submit button.

For example, IE adds this to the query string:

?search=this+is+text&op=Reset+Filters

In all other browsers the same query looks like this:

?search=this+is+text

When I check the $_GET superglobal in PHP, I noticed that op is only being added when I run the application in IE and only when I hit the enter key in the form.

Based on the HTML below, it kind of makes sense that hitting enter would add op to the query string because both the submit button and the reset button are contained within the form. But why would op only get added to IE?

<form>
...
<div class="submit-button">
  <input class="form-submit" type="submit" id="edit-submit-fda-views" name="" value="Submit">    
</div>
<div class="reset-button">
  <input type="submit" id="edit-reset" name="op" value="Reset Filters" class="form-submit">      
</div>
...
</form>

Any idea why this might be happening?

UPDATE: One other piece of information that might be important. Because the form is auto-submit, the first submit button is actually hidden. I'm wondering if that's why IE is using the second button as the submit handler.

Upvotes: 1

Views: 4696

Answers (3)

neuquen
neuquen

Reputation: 4169

After doing some more research I realized I asked the wrong question. However, it's not letting me delete the question, so I'm posting the answer to my actual question here.

My question should have been, "When multiple inputs exist in a single form, how does the browser determine which one is chosen when hitting the enter key?"

The answer is, when the enter key is hit, the first input of type="submit" is chosen. However, IE will skip any submit buttons that are hidden with display:none.

I found the answer here:

Multiple submit buttons on HTML form – designate one button as default

My fix was to set the submit button to position: absolute; left: -1000% rather than display:none. I got that solution from @bobince on the linked answer, however, left:-100% did not push it completely off the page for me so I changed it to left:-1000%.

Upvotes: 3

biznetix
biznetix

Reputation: 94

A submit button is an input. It has a name and a value. When you click on one of the submit buttons, it's value gets added to the the submission with it's name. When you hit the enter key, the form is automatically submitted, but since you are using two submit buttons, they are both contributing a parameter. You have a lot of options that others have already suggested. You could change the type to "reset" or "button", but if you need to post to the server for both actions, then you could intercept the keystroke with javascript and click the button in code. I would probably go with a button type that would submit the form like this.

<input type="button" id="edit-reset" name="op" value="Reset Filters"
class="form-submit" onclick="submitform()">

<Script>
function submitform()
{
 document.getElementById("your-form-name-here").submit();
} 
</script>

Upvotes: 0

Pocketsand
Pocketsand

Reputation: 1281

IMHO it seems wrong to be using a submit button do convey some information other than "hey, I've submitted some data". If the user hits enter to submit the form it is reasonable that some browsers would send all the data associated with all the submit buttons.

If you are just resetting the inputs from previous parts of the form you could use:

<button type="reset">

If you do need other input data maybe a checkbox would be more appropriate:

<form>
...
<input type="checkbox" id="edit-reset" name="op" value="Reset Filters">
<label for="edit-reset">Reset Filters</label>

<div class="submit-button">
  <input class="form-submit" type="submit" id="edit-submit-fda-views" name="" value="Submit">    
</div>
...
</form>

If you do not need other input data you could use two forms:

<form>
...
<div class="submit-button">
  <input class="form-submit" type="submit" id="edit-submit-fda-views" name="" value="Submit">    
</div>
</form>

<form>
<div class="reset-button">
  <input type="submit" id="edit-reset" name="op" value="Reset Filters" class="form-submit">      
</div>
</form>

Upvotes: 0

Related Questions