问题描述
我正在使用标签浏览我的Web应用程序.每个选项卡上都有一个单独的文件，该文件包含用于接收用户输入并根据输入显示数据表的表格.
I'm using tabs to navigate my web application. On each tab is separate file which contains form to receive input from user and display table of data according to input.
我想问一下如何在相同选项卡中显示结果表，并使输入表单准备好再次接收差异输入.
I want to ask how can I display a result table in the same tabs and make my input form ready to receive difference input again.
这是我的代码
<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，但是我希望它仅在输入表单下方显示结果.
while table.htm will create dynamic table according to the input of firstname and lastname. But, right now when I submit the form it will open table.htm right away but I want it to only display the result below the input form.
推荐答案
您希望按照以下步骤进行操作:
You want to do something along these lines:
<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属性.
and you need to give the form an id attribute.
这篇关于jQuery ui选项卡表单提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！