Question

我正在使用标签来浏览我的网络应用程序。在每个选项卡上是单独的文件，其中包含用于接收来自用户的输入的表单和根据输入显示的数据表。

我想问一下如何在相同的标签中显示结果表，并使我的输入表格准备好再次接收差异输入。

这是我的代码

<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，但我希望它只显示输入表单下面的结果。

Answer 1

如果我正确理解了这个问题（阅读两次）

您可以简单地使用jquery发送ajax请求，表单已准备好进行下一次输入。

表单包含字段

<form id="myform">
...
<button id="sub">Submit</button>
</form>

下面的div将包含ajax-request响应，在你的情况下主要是一个表。

<div id="resultContainer"></div>

以下是通过ajax将表单提交给某个网址的脚本

<script>
$("#sub").click(function(){
        $.ajax({
            type: "POST",
            url: "myjsp.jsp",
            data: $("#myform").serialize(),
            complete: function(xhr, textStatus) {
                $("#resultContainer").html(xhr.responseText);
            }
        });
    });
</script>

Answer 2

你想沿着这些方向做点什么：

<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属性。

jQuery ui选项卡表单提交

2 个答案: