It's puzzling to me why this is happening. The situation seems very out of the ordinary. Typically, when I want an action to be triggered on a button click, I would use the following code snippet:
events:{
'click #button_name':'somefunction'
},
somefunction: function(){
alert("Blah");
}
However, it appears that this approach is not yielding the desired results for me.
Below is my JavaScript file:
var AddDriverView = Backbone.View.extend({
initialize : function() {
this.render();
},
events: {
'click #addDriveBtn' :'loadDriver'
},
render : function() {
console.log("render");
var template = _.template(addDriverTemplate, {});
return template;
// this.$el.html( template ,{});
},
loadDriver : function() {
alert("Add Driver Data");
}
});
The form consists of multiple input fields with the final submit button structured as follows:
<input type="button" id="addDriveBtn" class="btn btn-default btn-large span12" `value="Add Driver" />`
I expect an alert to appear upon clicking the aforementioned button. Is there any idea what mistake I might be making here?
Note: The HTML is not a template but rather a small view that will be rendered within a master view, with a name like "views.addDriver.html".
In the JavaScript file, the view gets rendered and console logging works fine.
Edit Updating the el from FORM to div solved the issue successfully.
Updated Question My goal now is to transfer all the data from the form into a collection. Can anyone provide guidance on how to achieve this and create a collection object from the form data?
Here is my attempted solution:
var formData = {};
$("#driverdata").children("input").each(function(i, el){
formData[el.id] = $(el).val();
});
console.log(JSON.stringify(formData));
Upon testing, this returned "{}" in both my Firefox and Chrome consoles...