The submit binding

The submit binding adds an event handler so that your chosen JavaScript function will be invoked when the associated DOM element is submitted. Typically you will only want to use this on form elements.

When you use the submit binding on a form, Footwork will prevent the browser's default submit action for that form. In other words, the browser will call your handler function but will not submit the form to the server. This is a useful default because when you use the submit binding, it's normally because you're using the form as an interface to your view model, not as a regular HTML form. If you do want to let the form submit like a normal HTML form, just return true from your submit handler.

Example

<form data-bind="submit: doSomething">
  ... form contents go here ...
  <button type="submit">Submit</button>
</form>

var viewModel = {
  doSomething : function(formElement) {
    // ... now do something
  }
};

As illustrated in this example, Footwork passes the form element as a parameter to your submit handler function. You can ignore that parameter if you want, or there are various ways you might want to use it, for example:

  • Extracting additional data or state from the form elements

  • Triggering UI-level validation using a library such as jQuery Validation, using code similar to the following snippet: if ($(formElement).valid()) { /* do something */ }.

Why not just put a click handler on the submit button?

Instead of using submit on the form, you could use click on the submit button. However, submit has the advantage that it also captures alternative ways to submit the form, such as pressing the enter key while typing into a text box.

Parameters

  • Main parameter: The function you want to bind to the element's submit event.

    • You can reference any JavaScript function - it doesn't have to be a function on your view model. You can reference a function on any object by writing submit: someObject.someFunction.

    • Functions on your view model are slightly special because you can reference them by name, i.e., you can write submit: doSomething and don't have to write submit: viewModel.doSomething (though technically that's also valid).

  • Additional parameters

    • None

Note

For information about how to pass additional parameters to your submit handler function, or how to control the this handle when invoking functions that aren't on your view model, see the notes relating to the click binding. All the notes on that page apply to submit handlers too.