5

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

问题是我将这个 jquery 脚本嵌入到我的 Java 代码中。现在我有一个来自 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);
4

7 回答 7

4

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

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

于 2013-02-13T23:48:06.367 回答
3

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

或者

在提交回调上做一个 $("#continueButton").click();

于 2013-02-14T05:56:52.500 回答
1

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

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

$("#demoForm").bind("after_remote_ajax", function(event, data){
    if(event.success && event.currentStep === finalStep) {
        windows.location.href="要转发到的 URL";
    }
});
于 2013-02-16T15:59:30.063 回答
1

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

$("#form-name").submit(function(){
  $.post("submit-path", function(result){
   // do something with result
  });
  return false;
});
于 2013-02-15T16:20:15.440 回答
0

如果您使用的是 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              
    }
    });
};
于 2013-02-15T19:57:03.300 回答
0

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

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

于 2013-03-07T12:23:34.217 回答
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();
            }

    });
});
于 2013-03-01T11:35:59.137 回答