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);

Does anyone know what "submit" is doing in codemine formwizard? — yogsma, Mar 06 '13 at 21:07

score 4 · Answer 1 · answered Feb 13 '13 at 23:48

4

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

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

answered Feb 13 '13 at 23:48

rvazquezglez

2,284
28
40

score 3 · Answer 2 · answered Feb 14 '13 at 05:56

3

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

OR

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

answered Feb 14 '13 at 05:56

surfealokesea

4,971
4
28
38

Pawel Pawlowski · Answer 3 · 2013-03-26T15:41:41.487

1

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;
});

edited Mar 26 '13 at 15:41

answered Feb 15 '13 at 16:20

Pawel Pawlowski

31
3

score 1 · Answer 4 · answered Feb 16 '13 at 15:59

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";
    }
});

I am trying this , but really didn't help much. – yogsma Feb 18 '13 at 16:17 — yogsma, Feb 18 '13 at 16:17

score 0 · Answer 5 · answered Feb 15 '13 at 19:57

If you are using JQuery -- why not used the Power of AJAX and make it more better user experience -

Define a jQuery event on Continue button :

  $("#continue-button").click(function(){
           windows.location.href="URL to be forwared to";
    }):

Submit an AJAX Request on click of Submit Button(Look at the documentation of AJAX method of jquery has how to show processing icon"

AJAX Request :

$.ajax({
    url : actionURL,
    dataType : <your dataType>,
    contentType : <your Content Type>,
    type : 'post',
    data : <bla bla>,
    success : function(data) {
        //Show Continue button              
    }
    });
};

The submit button is modified dynamically by formWizard, thus he can't bind the button. — Gepsens, Feb 16 '13 at 15:54

score 0 · Answer 6 · answered Mar 01 '13 at 11:35

wouldnt it be better if you use the continue button in the jquery form, and remove the submit button from Java?

$(function(){
    // bind a callback to the before_step_shown event
    $("#demoForm").bind("before_step_shown", function(event, data){
            if(!data.isBackNavigation){
            doSubmit();
            }

    });
});

score 0 · Answer 7 · edited Mar 07 '13 at 12:27

I think this is a design issue. If you are trying to create a multistep form where data are saved between each step, you should have a submit button on every step of the form, submit the data to the server, keep the track of the step using an input hidden value then send the next part of the form to the client. It is safer because your form will work even if javascript is not enabled client side. In such design, the process could be improved later to add an AJAX functionality.

If you do not need the data to be send between each steps, then you can do a single form with some kind of panel for each subforms that would be shown or hidden depending where the client is.

Please do not sign your posts. – Lightness Races in Orbit Mar 07 '13 at 12:27 — Lightness Races in Orbit, Mar 07 '13 at 12:27

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

7 Answers7