Jquery UI 通过单击来标记多个表单提交答案

【问题标题】：Jquery UI tabs multiple form submissions with on clickJquery UI 通过单击来标记多个表单提交
【发布时间】：2013-09-06 04:18:07
【问题描述】：

我正在为我的表单使用 Jquery ui 选项卡。下面是我的代码的骨架。

<form id="1" method="post" class="main" action="myservlet">
<div id="tabs">
   <ul>
      <li><a href="xyz/ABC.jsp">NewEmployee</a> </li>
      <li><a href="xyz/DEF.jsp">Add Leave</a> </li>
  </ul>
    </div>
</forms>

我的问题是我需要一键提交两种表单的详细信息，我在 ABC 和 DEF jsp 中都没有表单。我正在对每个特定 jsp 本身内部的两个 jsp 进行验证。

我在 SOF 中提到了一些帖子，但可以得到我想要的东西。任何帮助深表感谢。

更新 1 Michael B 建议的解决方案在两个不同的查询中发送两个 jsp 中的数据。我希望在同一个查询字符串上发送两个数据。由于第二个jsp数据依赖于第一个jsp信息的主键。谢谢

【问题讨论】：

使用jquery可以进行。在每个 li 中给出表单动作，并在 jquery 函数中编写提交函数。
那么我需要在所有
之外有一个表单吗？我应该在哪里放置我的 submit 按钮？
$('#tabs form').each(function () { $('formname').submit(); });你可以这样使用

标签： jquery forms jsp jquery-ui-tabs

【解决方案1】：

不要在每个jsp页面（abc.js，def.jsp）中放置表单标签，并在标签页中处理form1的提交事件..

您需要将提交按钮放在最后一个选项卡的 jsp 页面中。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title> </title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

    <script>

        $(function () {
            $("#tabs").tabs({
                beforeLoad: function (event, ui) {
                    ui.jqXHR.error(function () {
                        ui.panel.html("Couldn't load this tab.");
                    });
                }
            });

            // handle submit of each form
            $('#form1').submit( function (e) {
                var form = $(this);
                e.preventDefault();

               $.ajax({
                    url: form.attr('action')
                    , type: form.attr('method')
                    , data: form.serialize()
                    , success: function (data) {
                        alert(data);
                    }
                    , error: function (jqXHR, textStatus, errorThrown) {
                       alert('Error:' + textStatus + ' - ' + errorThrown)
                   }
              });

            });
        });


    </script>
</head>
<body>
<form id="form1" method="post" class="main" action="myservlet">
    <div id="tabs">
        <ul>
            <li>
                <a href="1.htm">
                    Tab 1</a></li>
            <li>
                <a href="2.htm">
                    Tab 2</a></li>
        </ul>
    </div>
</form>

</body>
</html>

每个表单标签都应该正确设置方法和动作属性！

【讨论】：

我不想在第一个表单中显示提交按钮。因为我需要用户在两个选项卡中填写表格，然后单击提交按钮。如何阻止显示我可以在第一个表单中隐藏按钮并在最后一个选项卡中显示按钮吗？
您可以在 jsp 页面 url 中传递一个参数，例如“ABC.jsp?submit=false”，并根据该参数显示/隐藏提交的每个 jsp。
您的解决方案在两个 jsp 中以不同的请求发送表单数据。但我希望它在一个请求中提交。由于一些业务限制。
感谢您的更新。我设法找到了与您的类似的解决方案，但我没有使用 ajax 提交。只是在做老派的方式。