Geek asks and answers

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

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

The problem is that I am embedding this jquery script in my Java code. Right now, I have a submit button from the jquery form wizard, and I have a continue button from my Java code. Therefore, the user submits the form by clicking "submit" and then click "continue" to go to the next screen. Not an ideal situation for the user.

If I just use "continue" without clicking the "Submit" button, it does not save the form information. When I click submit and then continue , all the form information will be saved in the database. How can I use the continue button as a send, and also go to the next screen so that I don’t need the send button on the 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);
+5
source share
7 answers

You can add the "on submit" event to the form.

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

+4
source

Do a server side redirect, if submit is ok, to the next page.

OR

submit $ ( "# ContinueButton" ) ();.

+3

jQuery submit AJAX :

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

, formWizard .
, , , - .

, formWizard, , - , :

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

JQuery - Power AJAX -

jQuery "":

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

AJAX "" (. jQuery AJAX, "

AJAX:

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

jquery Java?

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

    });
});
0

, . , , , , , , . , , javascript . , AJAX.

, - , , .

0

More articles:


All Articles