Question

我正在使用jquery FormWizard，并希望在最后一个屏幕上使用提交按钮作为提交表单的方式并转到下一个屏幕。

问题是我在我的Java代码中嵌入了这个jquery脚本。现在我有一个来自jquery表单向导的“提交”按钮，我的Java代码中有一个“继续”按钮。因此，用户通过按“提交”提交表单，然后按“继续”进入下一个屏幕。不是用户的理想情况。

如果我只使用“继续”而不按提交，则不会存储表单的任何信息。按“提交”然后“继续”后，表单上的所有信息都会保存在数据库中。如何使用继续按钮作为提交，并进入下一个屏幕，以便我在最后一个屏幕上不需要提交按钮。

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

您可以在表单中添加“提交时”事件。

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

Answer 2

如果提交正常，请进行服务器端重定向到下一页。

或

在提交回调中创建一个 $（ “＃continueButton”）点击（）;

Answer 3

可能最好的方法是使用jQuery提交事件并使用AJAX将其提交给服务器：

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

Answer 4

如果我理解正确，formWizard只会帮助您使用向导在多个步骤中划分表单您不能只是单击该按钮，因为它会在下次单击时触发。

你应该做的是使用formWizard中的这个事件，然后你就不会增加复杂性，因为你不会覆盖你正在使用的插件的任何功能：

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

Answer 5

如果您正在使用JQuery - 为什么不使用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              
    }
    });
};

Answer 6

如果你在jquery表单中使用continue按钮并从Java中删除提交按钮会不会更好？

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

    });
});

Answer 7

我认为这是一个设计问题。如果您尝试创建一个多步骤表单，在每个步骤之间保存数据，您应该在表单的每一步都有一个提交按钮，将数据提交给服务器，使用输入隐藏值保持步骤的跟踪然后发送表单的下一部分给客户端。它更安全，因为即使javascript未启用客户端，您的表单也能正常工作。在这种设计中，稍后可以改进该过程以添加AJAX功能。

如果您不需要在每个步骤之间发送数据，那么您可以为每个子表单创建一个单独的表单，根据客户端的位置显示或隐藏每个子表单。

提交按钮以提交表单并使用jquery表单向导转到下一个屏幕

7 个答案: