Question

I have a form:

<form>
    <input type="text" name="email" >
    <input type="text" name="phone" >
    <input type="button" value="ok" />
</form>

When clicking the button, I’d like to copy the form values to a corresponding model.

I’ve found Backbone.ModelBinder which will automatically copy values to model whenever the values are changed, but that’s not what I want, I just want to copy the values when the button is clicked.

Answer 1

write a custom function into the view where the form is located and bind it to the ok click event:

events: {
  ...
  'click input[name="ok"]': 'copyFormToModel'
  ...
},

...

copyFormToModel: function() {
  var email = $('input[name="email"]').val();
  var phone = $('input[name="phone"]').val();

  // Perform some sort of validation

  this.model.email = email;
  this.model.phone = phone;
}

This isn’t the prettiest answer, but if you have just one small form in your page, then using some library or plugin might be a bit overkill. If you want to use a plugin or library, then for your case I think backbone-forms could do the trick. It features updating the model bound to the form with a method call rather than every time fields are updated.