Question posted in
You can find the official documentation here.

Jquery ajax – How to store an incomplete multi-step form?

I currently have a form that is multi-step; it doesn’t do anything fancy per step, it simply does display: none on the previous step to hide the previous fields and move the user forward.

It submits via AJAX and has required fields.

Is there any way to capture the data from each step of the form, and then, if the user drops off or never submits the form, send the captured data – I’m not worried about any issues in regards to data protection, as it doesn’t apply in this situation.

The form basically looks like this:

<form> 
   <div class="step-1">
      <label>First Field
      <input type="text" id="field1" name="field1" maxlength="50">
      </label>
      <label>Second Field
      <input type="text" id="field2" name="field2" maxlength="50">
      </label>

      <a href="#" class="next-step">next step</a>
   </div>
   <div class="step-2">
      <label>Third Field
      <input type="text" id="field3" name="field3" maxlength="50">
      </label>
      <label>Fourth Field
      <input type="text" id="field4" name="field4" maxlength="50">
      </label>
      <input type="submit" id="send" name="submit" />
      <span id="submitdata"></span>
   </div>
</form>

The bit I’m struggling with is knowing when the user drops… Does it need to invoke some kind of session per the form?

Tags:

2

Answers


  1. 0

    Try this code:

    $(document).ready(function () {
    //alert("hi");
    setTimeout(function () {
        $("#msg").hide(1000);
    }, 3000);

    $("form#product_form").submit(function (e) {
        //alert('hi');
        e.preventDefault();
        var formData = new FormData($(this)[0]);
        $.ajax({
            url: '<?php echo site_url('C_home/pro_add'); ?>',
            type: "POST",
            data: formData,
            dataType: "json",
            contentType: false,
            processData: false,
            success: function (result) {
                //alert(result);
                $("#product_form").trigger('reset');
                window.location.href = "<?php echo site_url('C_home/data_tbl'); ?>";
            }
        });
        return false;
    });

    $("#product_form").validate({
        rules: {
            name: "required",
            category_id: "required",
            image: "required",
            description: "required",
            qty: "required",
            price: "required"
        },
        messages: {
            name: "Product name is required",
            category_id: "Please Select Category name",
            image: "Plases Select Product Image",
            description: "Product Description is required",
            qty: "Product Quantity is required",
            price: "Product Price is required",
        }
    })
});

    <script src="<?php echo base_url(); ?>assets/js/jquery.bootstrap.wizard.js" type="text/javascript"></script>
<script src="<?php echo base_url(); ?>assets/js/jquery.validate.min.js"></script>
<script src="<?php echo base_url(); ?>assets/js/wizard.js"></script>
<div class="wizard-container">
   <div class="card wizard-card ct-wizard-orange" id="wizard">
      <form id="product_form" method="POST" enctype="multipart/form-data">
         <div class="wizard-header">
            <h3>
               Jquery Accordion
            </h3>
         </div>
         <ul>
            <li><a href="<?php echo base_url(); ?>#about" data-toggle="tab">Product Panel 1</a></li>
            <li><a href="<?php echo base_url(); ?>#account" data-toggle="tab">Product Panel 2</a></li>
            <li><a href="<?php echo base_url(); ?>#address" data-toggle="tab">Product Panel 3</a></li>
         </ul>
         <div class="tab-content">
            <div class="tab-pane" id="about">
               <div class="row">
                  <div class="col-sm-10 col-sm-offset-1">
                     <div class="form-group">
                        <label>Product Name</label>
                        <input type="text" class="form-control" name="name" id="name" placeholder="Enter Product Name" required="" />
                     </div>
                     <div class="form-group">
                        <label>Select Category</small></label>
                        <select class="form-control" id="category_id" name="category_id" required="">
                           <option></option>
                           <!-- <option>--Select Category Name--</option> -->
                           <?php
                              foreach ($category as $row) {
                                  ?>
                           <option value="<?php echo $row['category_id']; ?>"><?php echo $row['category_name']; ?></option>
                           <?php } ?>
                        </select>
                     </div>
                  </div>
               </div>
            </div>
            <div class="tab-pane" id="account">
               <div class="row">
                  <div class="col-sm-4 col-sm-offset-1">
                     <div class="picture-container">
                        <div class="picture">
                           <img src="<?php echo base_url(); ?>assets/img/default-avatar.png" style="height: 100px;" class="picture-src" id="wizardPicturePreview" title=""/>
                           <input type="file" class="form-control" name="image" id="wizard-picture" required="">
                        </div>
                        <h6>Choose Picture</h6>
                     </div>
                  </div>
                  <div class="col-sm-6">
                     <div class="form-group">
                        <label>Product Description</label>
                        <textarea class="form-control" name="description" id="description" placeholder="Enter Product Description" rows="5" required></textarea>
                     </div>
                  </div>
               </div>
            </div>
            <div class="tab-pane" id="address">
               <div class="row">
                  <div class="col-sm-10 col-sm-offset-1">
                     <div class="form-group">
                        <label>Product Qty</label>
                        <input type="text" class="form-control" name="qty" id="qty" placeholder="Enter Product Qty" required />
                     </div>
                     <div class="form-group">
                        <label>Product Price</label>
                        <input type="text" class="form-control" name="price" id="price" placeholder="Enter Product Price" required />
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div class="wizard-footer">
            <div class="pull-right">
               <button type='button' class='btn btn-next btn-fill btn-warning btn-wd btn-sm' name='next' id="next" />Next</button>
               <button type='submit' class='btn btn-finish btn-fill btn-warning btn-wd btn-sm' name='submit' value='Submit' />Submit</button>
            </div>
            <div class="pull-left">
               <input type='button' class='btn btn-previous btn-fill btn-default btn-wd btn-sm' name='previous' id="prev" value='Previous' />
            </div>
            <div class="clearfix"></div>
         </div>
      </form>
   </div>
</div>
    Login or Signup to reply.
  2. 0

    You could automatically submit the form when the user leaves the page, using the beforeUnload event:

    var notSubmitted = true;
$('form').on('submit', function() { notSubmitted = false; });

$(window).on("beforeunload", function() { 
    return notSubmitted ? $('form').submit() : null; 
})

$("form").submit(function (e) {
     e.preventDefault();
     // ... ajax submission goes here ...
     return false;
});

    If you need to record that it is a ‘by default’ submission, then you could use a hidden form element instead of the variable notSubmitted. The hidden element would give you that data in the form.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search