Using an Ajax form is a great solution for any type of project and it is very simple and straight forward. Ajax allows us to dynamically submit the form and send all the information we need to me processed through a PHP file we will be creating.
Lets start setting up the index.html file. First we will create our form. We want to make sure we have the method set to "post" and the action set properly as well.
##Ajax-form.js
####Prevent Default
Lets start setting up our ajax request. First we want to add a submit event on our form we created (ajax-form). We will need to add “event.preventDefault(); which will prevent our form from submitting and refreshing out page.
####Ajax Data
So now that we haven't prevented the form from refreshing, we will need to add our data from our from into “ var ajaxFormData” so we know what data we will have to be passing.
####Ajax Function
jQuery allows us to easy set up our Ajax function. we will need a few things for this function to work.
- type: Define what HTTP verb we will want to use. In our case this is “post”
- url: This will be the url where we want to post (www.mysite/sender.php)
- data: This will be our Ajax data that we created.
- dataType: The type of data we expect back from the server
##Sender.php
This is where we will start processing the data we got from our Ajax request. First we will make two variables to hold data to pass back ($data) and a variable to hold our errors($errors).
This is a pretty straight forward process. We will be checking if our form fields are empty , and if they are we will add our errors into our $errors variable.
If the $errors variable is not empty , we are going to send back our data as else and return all of our errors. If the validation has passed we will get all of the information from the form and save them into variables. After we have saved our information from the form , we will set up our mail function. We will need who we are sending the email to ($to) , our subject ($subject) , our message ($message) , and any headers we decide to add ($headers). When we are finished we will send our data back to our Ajax function.
This is our last step of our ajax contact form. This is where we get the data back from our php page and continue to work with it.
We are going to be using the .done callback function to get our data. We are going to check if our data was successful or not. If it was not successful we want to show our errors. We will be targeting each of our form-groups and appending the proper error to it.
If our form process was successful we will target our form and leave a success message as well as we will use an “alert” to also let the user know the message has been sent. Congrats you did it! Now you know the power of Ajax after creating this simple Ajax contact form.
