Ajax Form Submit

Description

Framework7 allows you to automatically send data using Ajax by using the following two ways −

• When the user submits the form or submit event is triggered on form programmatically.

• When the user modifies any form field or change event triggered on form programmatically.

Send form data on submit

To enable Ajax form and send the form data on clicking Submit, automatically, you need to add the ajax-submit class to form. After the user submits the form, Ajax will automatically send the form data using the following rules −

• Form data will be sent to the file or the URL mentioned in action attribute of the form.

• Request method will be similar as mentioned in the method attribute of the form.

• Content type will be the same as mentioned in the enctype attribute of the form. If not mentioned by default, it is application/x-www-form-urlencoded.

Send form data on input change

We can submit the form data when the user makes any changes in the form fields by using ajax-submit-onchange class as shown below −

<form action = "send.html" method = "GET" class = "ajax-submit-onchange">
   ...
</form>  

When the user modifies any form field, form data will be sent automatically using Ajax with same rules as discussed above.

Ajax submit event

To get actual XHR response from the file/URL where you sent data, you can use special events as shown below −