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選項卡表單提交

回答

相關問題