Jquery UI选项卡多个表单提交，单击即可_Jquery_Forms_Jsp_Jquery Ui Tabs

Jquery UI选项卡多个表单提交，单击即可

jquery forms jsp

Jquery UI选项卡多个表单提交，单击即可,jquery,forms,jsp,jquery-ui-tabs,Jquery,Forms,Jsp,Jquery Ui Tabs,我正在为我的表单使用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.j

我正在为我的表单使用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信息的主键。

感谢您不要在每个jsp页面（abc.js、def.jsp）中放置表单标记，并在tabs页面中处理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>


$（函数（）{
$（“#制表符”）。制表符({
加载前：函数（事件、ui）{
ui.jqXHR.error（函数（）{
html（“无法加载此选项卡”）；
});
}
});
//处理每份表格的提交
$（'#form1'）。提交（函数（e）{
变量形式=$（此）；
e、 预防默认值（）；
$.ajax({
url:form.attr（'action'）
，类型：form.attr（'method'）
，数据：form.serialize（）
，成功：函数（数据）{
警报（数据）；
}
，错误：函数（jqXHR，textStatus，errorshown）{
警报（'Error:'+textStatus+'-'+errorshown）
}
});
});
});

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

使用jquery可以执行此操作。在每个li中给出表单操作，并在jquery函数中编写提交函数。然后我是否需要在all之外有一个表单，以及我应该将提交按钮放在哪里？$（'tabs form'）。每个（函数（）{$（'formname'）.submit（）；}）；您可以这样使用我不想在第一个表单中显示提交按钮。因为我需要用户在两个选项卡中填写表单，然后单击提交按钮。如何阻止显示我可以在第一个表单中隐藏按钮并在最后一个选项卡中显示按钮吗？您可以在jsp页面url中传递一个参数，如“ABC.jsp？submit=false”，并根据该参数为每个jsp显示/隐藏submit。您的解决方案在不同的请求中发送两个jsp中的表单数据。但我希望它在一个单一的请求提交。由于一些业务限制。感谢您的更新。我设法找到了解决方案，这与您的类似，但我没有使用ajax提交。只是做老一套的事。