Backbone form doesn't submit with more than one input field

Question

Using Backbone.js, I have a form as follows:

<form id="searchBar">
    <input type="search" name="search" id="searchBox" value=""/>
    <input type="text" name="location" id="location" value="City, ST"/>
</form>

And, a view to process said form as follows:

window.FindPlaceView = Backbone.View.extend({

    /*code here*/

    events: {
      "submit form#searchBar" : "processClick"
    },

    processClick: function(e) {
       e.preventDefault();
       console.log("Submitted");
       /*form processing code here*/
    }
});

If I remove the second input field in the form, the form will submit on enter just fine. As soon as I add that second input back into the form, no dice. The binding is seemingly lost at that point.

Is there any reason why having two fields in a form would throw a loop on the submit event binding? This seems like such a stupid issue, I'm banging my head against the wall on it.

I've tried making the input a different type, stripping all the attributes out of it, everything. Even if I put an empty <input></input> in here, it breaks.

(I should note, I don't have a submit button here, just trying to submit on enter)

Ideas?

Thanks.

Answer 1

Your issue is not related to backbone.js but how browsers works:

From the Jquery submit method documentation:

Depending on the browser, the Enter key may only cause a form submission if the form has exactly one text field, or only when there is a submit button present. The interface should not rely on a particular behavior for this key unless the issue is forced by observing the keypress event for presses of the Enter key.

Of course there is SO question about it:

• Why are forms not submitted if there is more than one unnamed input?

And here you can find some workaround how to submit a form on Enter without a submit button:

• Submitting a form by pressing enter without a submit button