April 23, 2012

How to deal with multi-tab forms( with or without jquery)

Question by aoi

I have a large page/form divided as tabs, now the requirement is such that, each tab should have a save button, which will submit the fields within that tab. And there should also be a global save button which saves the data from all tabs.

My idea of doing this was, making separate forms for each tab, and use jquery serialize to post them, but some of the forms have image upload and ckeditor fields which do not play well with jquery.

Any idea,about what would be the best way to solve this?

Answer by Starx

With Using jQuery, You can submit each form one by one

$("#globalsubmit").submit(function(e){

  //simply submit all the forms one by one
  $("#form1").submit();
  $("#form2").submit();

  return false;
});

Or Find all the form and submit at once

$("#globalsubmit").submit(function(e){

  $("form").each(function() { $(this).submit(); });

  return false;
});

Without jQuery. Here are the few steps you might want to follow.

  1. Submit the form, do not process the data, but store in the session.
  2. Collect all the data from all the form in the session and at the end Submit the data as a bulk.

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!