How to develop a save as draft form in PHP and MySQL with Ajax and jQuery

When a form has many input fields, we usually add a button to save the form as draft. User can work on the draft form later to fill in the rest of the form and submit. Using PHP, Ajax and MySQL, you can implement save as draft form in your project.

In this topic, I will develop an application to show how you can write custom PHP code with Ajax to implement save as draft while entering data in a form. I will use a simple application form where user can enter the data with options to Save as Draft and Submit.

save draftAssumption

  1. You must have basic knowledge of PHP with HTML, CSS, JavaScript/jQuery.
  2. You must have basic understanding of Ajax. You can read below topics for more details:
    1. How to install xampp for Windows with setup for PHP development
    2. How to write PHP code with examples for beginners
    3. How to build a simple CRUD application in PHP and MySQL

Save draft in phpFolders and Files

Below is a screenshot of the folder structure and files I am using:

draft in ajax in php

I have created a folder named 'application' under 'xampp/htdocs' as I am using XAMPP. If you are using WAMP, create 'application' folder under 'www'.

Folder 'cfg' - In this folder I have kept dbconnect.php which is used to connect to the MySQL database.
Folder 'css' - My custom stylesheet is in this folder
Folder 'js' - In this folder I have my custom JavaScripts file
index.php is my main program that displays a list of applications if available and options to view submitted application and edit draft application.
application_form.php is the application form user can fill in and submit or save it as draft.
process_application.php is the php code written to process the application, that is, it does insert/update application in database table.
save_application.php - It is the PHP program called from Ajax to save application as draft.

Below is the screenshot of index.php

draft using ajax in php

In the above screen, you can see a list of applications and you can add new application by clicking on the New Application button. Below is the screenshot of the application form.

save draft feature in forms

Using Save Draft button you can save the application in draft status. When Save Draft button is clicked, we will run an Ajax script which will call a PHP program to save the application in database with status as draft. User can click on Edit button from the list of applications to further work on the application and submit. When application is submitted, it's status changes to submitted.

Step 1 - Create a MySQL table for user applications

Let us create a table named 'user_application' in MySQL database. This table will have application details, like name, email and age etc. I have a database called 'demo'. So this Table will be created in demo database. If you have an existing database other than demo you can also use it. Just make sure same table name does not exist already. Table structure is given below:

save draft of a form in ajax in php

Table has 8 columns.

  1. appl_id - It is the primary key and auto incremented id of the application
  2. name - Name of the Applicant
  3. email - Email Id of the Applicant
  4. age - Age of the Applicant
  5. gender - Gender of the Applicant
  6. percent_score - %Score obtained bt the applicant
  7. date - Date of submission or draft submission
  8. status - Status of application (Draft or Submitted)
MySQL create table script is given below, you can use this code to create the table. You can also download the scripts by clicking on download button given later in this topic.

user_application.sql

After you created the table, make sure table structure is same as above. I am not inserting any data in the table initially. By submitting the application or saving the application as draft, data will be inserted in this table.

Step 2 - Connect to MySQL database (dbconnect.php)

Use below script to connect to the database. Note that we have this database connection php program in 'cfg' folder. This is written once and used in every program where database connection is needed. This will be easy for maintenance and also will enable reusability of the code.

dbconnect.php

I am using mysqli_connect() function which needs 4 parameters.

  1. server - in our case it is localhost
  2. userid - we are using root user
  3. password - no password for user root
  4. database name - demo in our case.

If connection is successful, it returns true; false otherwise. We will include this dbconnect.php in other php programs so that we do not need to write it again in other programs that need database connection. For detail database connection understanding please read topic How to Connect to MySQL database using PHP.

Step 3 - Display a list of applications (index.php)

In index.php, I will show a list of applications. It is a simple html table where I will select all applications from user_application table and display along with their status (Draft or Submitted). For each application there will be a link either view (for submitted application) or Edit (for draft application). In addition to this, there will be a button to create a new application.

I have given a screenshot of the list of applications below:

save form contents in php and ajax

It is a simple html table where I am displaying details of each application in a for loop after fetching rows from the database. Let's see the code.

index.php

I am fetching them in a loop and displaying row by row in the table. Check line 39. Here I am checking the status of the application and based on status, I am showing View (Submitted) or Edit (Draft) links to call application_form.php with appl_id as parameter.

Step 4 - Create Application Form (application_form.php)

When user clicks om New Application button or clicks on view or edit button of an existing application, this program is called. It will display the application form where user can enter the data and Submit the form. I will create a simple form in Bootstrap with the input fields and two buttons. Save As draft button will call a JavaScript function which in turn will make an Ajax call to save the data in database. This will make status of application as Draft. Draft application can be updated later.

Clicking on Submit button will submit the form and will make the status of application as Submitted. Submitted application cannot be updated but can be viewed. I will use process_application.php to process the application when it is submitted.

Below is the code for application_form.php

application_form.php

If application id is available, I know the status of application. But if it is new application, it's status will be blank. Based on this, I show readonly values if status is submitted, I display the values to edit if status is draft, so that user can update the values.

In line 34, I have included process_application.php which is used to process the form after submission. I am calling saveData() JavaScript function when Save Draft button is clicked.

Step 5 - Write Ajax for Save as Draft (application.js)

You have seen, I have used a JavaScript functions - saveData() when user clicks on Save Draft button in the application form. This function is written in application.js file.

Function saveData()

This function is called when user clicks on Save Draft button in the application form. This will take the values from the form, will validate them and use Ajax to execute save_application.php. Note that, when a draft is saved either a new application id will be created for the first draft or an existing application id will be available when a draft application is saved as draft again. So that is why I will take application id also as input from the form. For new application, application id will be blank. Let's see the code for function saveData() function:

application.js

This function takes the form values and if at least a non empty value found, it proceeds with Ajax call.

  1. url: save_application.php - this will take the form values and insert/update into user_application table. Then give a message successful or failure.
  2. method: "POST" - I am using post method.
  3. data: {appl_id:appl_id, name:name, email:email, age:age, gender:gender, score:score} - here I am sending all the form field values.
  4. dataType:"text" - Response from Ajax call will be in text format.
If Ajax successfully executed, I am checking the value of response, i.e., output of save_application.php. If response is "Error", I display message on the top of the form.

For successful saving, appl_id will be the response. So, I am writing the appl_id in the form. Note that this appl_id could be a newly generated (for first draft) or it could be the same appl_id which was sent by Ajax to save_application.php (for saving draft more than once).

To display the message for few seconds, I have used setInterval() here. I am displaying the message for 3 seconds.

Now, let's see the code of save_application.php. It simply takes the input values and inserts a new row in user_application table or update user_application table for the $appl_id. If $appli_id is blank, it will insert a row in user_application table with the details of the application. But if $appl_id has a value, it will update the user_application table for the $appl_id. Below is the code for save_application.php

save_application.php

For successful insert or update, I am displaying $appl_id. So either newly generated appl_id or existing appl_id will be sent as Ajax response.

Now, I will just explain the step when application is submitted. It could be a direct submission or it could a draft application being submitted.

Step 6 - Process Application after Submit (process_application.php)

User can submit the application first time after filling up the application form or user can edit a draft application and submit it.

process_application.php

It takes the values from the form and does some validation. Status of application after successful submission should be "Submitted", but if there is some error, then I need to go back to previous status. That is why I added code line 37 to 44. If all validations are successful, I update existing draft application ($appl_id !="") and insert for a new application($appl_id = ""). If error occurs or validation fails, I need to go back to previous status, so I added lines 59 and 64 ($status = $prev_status).

Step 7 - Add CSS (style.css)

Let us add below styles. I have already added style.css in index.php and application_form.php.

style.css

These are simple styles. You can always add or change to make the screen look better. Keep this style.css file in your css folder.

how to store form data as draft in php and ajaxTest the Application

Make sure in your XAMPP control panel Apache and MySQL services are running. Open the browser and run localhost/application. You will see the home page displayed as below:

save html form as draft

It will not show any application as our user_application table is empty. Click on New Application button and Save and Submit an application. If you save it, check the status in the application list.

add save as draft in form data

Save as draft using Ajax in PHP

Use edit link and update a draft application and then submit. Now you do other testing like validation etc. and test your own test cases. Make sure to verify in the database table, if all values are inserted/updated correctly.

Hope you could understand all the steps and you could test it successfully.

Save as draft using Ajax in PHPImportant Note

  1. In this application I have not used a login option for the user, in a typical application user has to login and submit the application.
  2. While saving the draft I have not used validation for email id, age and marks. But, during submission these are being validated. So you can enter anything in these fields and save it. But while submitting you will see validation error messages.
  3. I have used minimum styles, as our main focus is on the development and not the design of the form how it should look like. There is always a scope to give the screen a better look. You can add your own stylesheet.
  4. Instead of using the button for saving draft, you can use Auto Save function. In that case user does not need to click on the button but the form will automatically be saved. It is the same application I developed using auto save feature. Only difference will be instead of calling the savaData() function on onClick event of the button, call the same function in JavaScript after certain interval using setInterval(). Please refer topic How to autosave form as draft in PHP and Ajax without page refresh.

Scope of Improvement

You can add a login form of the user so that user can login an apply. In that case user can see only his/her application not all applications. Also try if you can add form validation during saving as draft.

download source code for save as draft using Ajax in PHPDownload Source Code

I have put all codes in a zip file. You can download it by clicking on the Download button below. You do not need to register yourself to download it. You can directly use the code or you can modify them as per your requirements.

Save as draft in Ajax in PHPConclusion

In this example, I have showed you how you can implement save as draft using Ajax and submit the form. I have used only few fields in the form. But in actual project you might see a data entry form with many fields in it. In that case Save as Draft is highly recommended.