jQuery ui选项卡表单提交

我正在使用选项卡导航我的web应用程序。每个选项卡上都是单独的文件，其中包含用于接收来自用户的输入并根据输入显示数据表的表单。jQuery ui选项卡表单提交

我想问如何显示一个结果表在相同的标签，并使我的输入形式准备好再次接收差分输入。

这是我的代码我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>

的

<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>

示例而table.htm将根据firstname和lastname输入创建动态表。但是，现在当我提交表单时，它将立即打开table.htm，但我希望它只在输入表单下方显示结果。

来源

2013-08-29 user2612767

您的代码是纯粹的客户端，还是您在服务器端使用java或servlet？ – ds345

@GopakumarNG在编辑的时候，你也可以删除称呼和感谢（无论如何你都会提示/接受答案时隐含），并且请仅对代码（或文件名）使用反引号，但对于关键字或技术名称请不要使用反引号 –

我的朋友会提供从数据库中查询数据的服务，但我必须让jquery选项卡中的内容能够调用服务并使用返回的结果在同一个选项卡中构建动态表 – user2612767

如果我理解正确的问题（读两遍）

你可以简单地使用jQuery发送Ajax请求，你的表格是准备好下一次输入。

形式包含字段

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

下面的div将包含AJAX请求的响应，其中大部分是在你的情况的表。

<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>

来源

2013-08-30 02:36:38

你想要做的东西沿着这些路线：

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

来源

2013-08-30 02:41:42

jQuery ui选项卡表单提交

回答

相关问题