Inclusion of form tag, submit button on click function is not called

Question

I have a simple html form like this

<table>
    <tr><td >Topic: </td> <td>  <input type="text" name="Topic"></td></tr>
    <tr><td ><button id ="submit">submit</button></td></tr>
</table>

For this form i have implemented backbone.js, part of the code for backbone view is given below.

AppView = Backbone.View.extend({
    events: {
    "click #submit": "SubmitForm",
    },
    SubmitForm: function(){
    topic =     $("#Topic").val();
    var subject_model = new App_Form();
    subject_model.save();
    }

My question is, when i include the form tag in the html form above. On click of the 'submit' button the SubmitForm function is not called. Whereas on exclusion of the form tag the SubmitForm function is called on click of submit button.

Could somebody help with this please!

Please, update your html. I see no element with `id="submit"` and no `form` element. — avrelian, Nov 18 '11 at 11:29
My question is, if i include the form tag the SubmitForm function is not called. — verdure, Nov 18 '11 at 11:52

score 0 · Answer 1 · answered Apr 03 '12 at 22:57

0

Check to make sure that you've defined an el in your Backbone.View and that the selector in your event map is with the scope of that el.

If the event isn't bound often times its because you've failed to provide a scoped selector.

answered Apr 03 '12 at 22:57

jpgrace

401
4
9

score 0 · Accepted Answer · answered Nov 18 '11 at 12:27

0

You should return false; in SubmitForm to prevent actual submitting.

var AppView = Backbone.View.extend({
    events: {
        "click #submit": "SubmitForm",
    },
    SubmitForm: function(){
        topic = $("#Topic").val();
        var subject_model = new App_Form();
        subject_model.save();
        return false;
    }
});

answered Nov 18 '11 at 12:27

avrelian

798
6
10

1

Seems dangerous, you should be doing `event.preventDefault()` instead of `return false` – chemoish Nov 20 '14 at 23:29
@chemoish Why? Before you answer please take a look at [event.preventDefault() vs. return false](http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false). Just a tiny excerpt: "`return false` from within a jQuery event handler is effectively the same as calling both `e.preventDefault` and `e.stopPropagation` on the passed `jQuery.Event` object". `Backbone` is using `jQuery` for dispatching events. – avrelian Nov 21 '14 at 10:22
@avrelian I know what it does. What is the point of e.stopPropagation() in this context (Return false can be dangerous if people don't understand what it does)? The problem that you are alluding to is that the form is actually submitting to a particular URL instead of executing the SubmitForm()... So you want to prevent the default behavior... A more thorough answer would be to update the event to a "submit" event instead (Preventing the firing of a click and a submit event), in addition to explicitly defining a type="submit" on the button... and helping the guy out to not define a global var. – chemoish Nov 25 '14 at 21:24

Inclusion of form tag, submit button on click function is not called

2 Answers2