Spread the love

In this tutorial i am going to change a simple html form into Ajax form or submitting a form without reload. For this purpose i will use jQuery Ajax method and serialize method.

i also created simple jQuery plugin which you can integrate in your web application and take benefit of it. so let’s begin with some simple steps.

Step 1: Create a html form

First step is to create a html form

<div class="col-md-6 offset-md-3">
            <h3>Convert any form into Ajax form - Readerstacks.com</h3>

            <form method="post" id="validateajax" action="submit.php" name="registerform">
              <div class="form-group">
                <input type="text" name="email" value="" class="form-control" />

              <div class="form-group">
                <label>Phone number</label>
                <input type="text" name="phone_number" value="" class="form-control" />
              <div class="form-group">
                <input type="file" name="picture[]"   class="form-control" />
              <div class="form-group">
                <input type="text" name="username" value="" class="form-control" />

              <div class="form-group">
                <button type="submit" class="btn btn-primary">Register</button>

Step 2: Add jQuery and handle form submit

Next step is to include the jQuery library in page and handle the form submission.

  <script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>

Now, implement the jquery

                var action = $(this).attr("action");
                var method = $(this).attr("method");
                var form_data = new FormData($(this)[0]);
                          url: action,  
                          dataType:'json', // what to expect back from the server
                          cache: false,
                          contentType: false,
                          processData: false,
                          data: form_data,
                          type: method,
                          success: function (response) {
                              // display success response from the server
                          error: function (response) {


Here, we add handled submit event and then find the form action and method. In the next line, we converted the form object in FormData.

Step 3: Check the implement

Download or check live implementation

Leave a Reply