[英]jQuery ui tabs form submit
我正在使用标签浏览我的Web应用程序。 每个选项卡上都有一个单独的文件,该文件包含用于接收用户输入并根据输入显示数据表的表格。
我想问一下如何在相同选项卡中显示结果表,并使输入表单准备好再次接收差异输入。
这是我的代码
<div id="tabs">
<ul>
<li><a href="t1.htm">Tab 1</a></li>
<li><a href="t2.htm">Tab 2</a></li>
<li><a href="t3.htm">Tab 3</a></li>
</ul>
</div>
我的t1.htm的示例
<form action="table.htm" method="POST">
First Name: <input type="text" name="first_name">
<br />
Last Name: <input type="text" name="last_name" />
<input type="submit" value="Submit" />
</form>
而table.htm
将根据firstname
和lastname
的输入创建动态表。 但是,现在,当我提交表单时,它将立即打开table.htm
,但我希望它仅在输入表单下方显示结果。
如果我正确理解了问题(请阅读两次)
您可以简单地使用jquery发送ajax请求,您的表单就可以进行下一次输入了。
表单包含以下字段
<form id="myform">
...
<button id="sub">Submit</button>
</form>
下面的div将包含ajax-request响应,在您的情况下,该响应大部分是一个表。
<div id="resultContainer"></div>
这是通过ajax将表单提交到某些url的脚本
<script>
$("#sub").click(function(){
$.ajax({
type: "POST",
url: "myjsp.jsp",
data: $("#myform").serialize(),
complete: function(xhr, textStatus) {
$("#resultContainer").html(xhr.responseText);
}
});
});
</script>
您想按照以下方式做一些事情:
<script type="text/javascript">
$('form:eq(0)').submit(function(e){
e.preventDefault();
$.ajax({
type: "POST",
url: "table.htm",
data: $(this).serialize(),
dataType: 'text/html',
success: function(response) {
$(this).after(response);
}
});
return false;
});
</script>
并且您需要给表单一个id
属性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.