jQuery UI在单击时可以选择多个表单提交 [英] Jquery UI tabs multiple form submissions with on click
问题描述
我正在为表单使用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)中放置表单标签，并在选项卡页面中处理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>
每个表单标签都应正确设置方法和操作属性！
I am using Jquery ui tabs for my forms. Below is the skeleton of my code.
<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>
My problem is that I need to submit the details in both forms on one button click, I dont have forms inside both ABC and DEF jsp. I am carrying out validation of both jsp inside the each specific jsp itself.
I referred to few post in SOF but could get what I am looking for. Any help is much appreciated.
Update 1 The solution suggested by Michael B send the data in two jsp's in two different query. I want both data to be sent on the same query string. As the second jsp data depend on the primary key of the first jsp information. Thanks
Don't place form tags inside each jsp page (abc.js , def.jsp) and handle submit event of form1 in the tabs page ..
You will need to place the submit button in jsp page of last tab .
<!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>
each form tag should have method and action attributes set correctly !
这篇关于jQuery UI在单击时可以选择多个表单提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
