Submit button to submit form and go to next screen using jquery form-wizard

Question

I am using jquery FormWizard and would like to use submit button on last screen as a way to submit the form and go to next screen.

Issue is I am embedding this jquery script in my Java code. Right now I have a "submit" button from jquery form wizard and I have a "continue" button from my Java code. So user submits the form by pressing "submit" and then press "continue" to go to next screen. Not an ideal situation for user.

If I just use "continue" without pressing submit, it doesn't store any information of the form. Once I press "submit" and then "continue", all information on the form will be saved in the database. How can I use continue button as submit and also to proceed to next screen so that I don't need that submit button on last screen.

Script sc = new Script();
sc.add("$(function(){$('#formScreenQuestions').formwizard({formPluginEnabled: true,validationEnabled: true,focusFirstInput : true,disableUIStyles : true});});");
HEADER.add(sc); 

Form form = new Form("criteria");
form.set(ID, "formScreenQuestions");
Div dh = new Div();
dh.set(ID, "lastStep");
dh.set(CLASS,"step");
Table vt = new Table();
vt.row();
vt.cell(text("Please press SUBMIT before pressing CONTINUE"));
==== showing some questions with checkboxes to select =====
dh.add(vt);
Div db = new Div();
db.set(ID,"navigation");
Table bt = new Table();
bt.row();
bt.cell("<input type='reset',id='back',value='Back' />");
bt.cell("<input type='submit',id='next',value='Next' />");      
db.add(bt); 

form.add(dv);
form.add(db);

Answer 1

You could add an "on submit" event to your form.

http://api.jquery.com/submit/

Answer 2

Make a server-side redirection if submit is ok, to the next page.

OR

On the submit callback make a $("#continueButton").click();

Answer 3

If I understand correctly, formWizard just helps you divide your form in multiple steps using a wizard.
You cannot just bind click the button because it would trigger when ever one clicks next.

What you should do is use this event from formWizard, then you wouldn't be adding complexity since you wouldn't be overriding any of the functionalities of the plugin you're using :

$("#demoForm").bind("after_remote_ajax", function(event, data){
    if(event.success && event.currentStep === finalStep) {
        windows.location.href="URL to be forwared to";
    }
});

Answer 4

Propably the best way is to use jQuery's submit event and using AJAX submit it to server:

$("#form-name").submit(function(){
  $.post("submit-path", function(result){
   // do something with result
  });
  return false;
});