jquery UIで次のボタンをクリックするとさまざまな入力値が送信されます

Question

現在、jquery UIタブとajax/postでページを更新せずに送信しています。いくつかの指針で、私は次のボタンをクリックするとdiv #wmd-previewを提出することができました。問題は、次のボタンがさまざまなタブでクリックされると同時に私が提出したい他のフィールドも持っていることです。

次のボタンをクリックしたときに、さまざまなタブのさまざまな入力フィールドの入力値を送信するにはどうすればよいですか？ EXAMPLE

（いくつかのテストのために私は現在、他の入力フィールドは、keyUpイベントやタイマーの設定を提出しています）

JS-次/前のボタンは、HTML

<script> 
     var currentTab = 0; 
      $(function() { 
      var $tabs = $('#tabs').tabs({ 
       disabled: [0, 1, 2] 
       , select: function() { 
        if (currentTab == 0) { 
         $.ajax({ 
         type: "POST", 
         url: "test1.php", 
         data: { "wmdVal": $("#wmd-preview").html() }, 
      success: function(result) { 
       $('#wmd_result').html($('#resultval', result).html()); 
      } 
         }); 
        } 
       } 
       , show: function(event, ui) { 
        currentTab = ui.index; 
       } 
      }); 

      $(".ui-tabs-panel").each(function(i) { 
       var totalSize = $(".ui-tabs-panel").size() - 1; 
       if (i != totalSize) { 
        next = i + 2; 
        $(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page &#187;</a>"); 
       } 
       if (i != 0) { 
        prev = i; 
        $(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>&#171; Prev Page</a>"); 
       } 
      }); 

      $('.next-tab, .prev-tab').click(function() { 
       var tabIndex = $(this).attr("rel"); 
       $tabs.tabs('enable', tabIndex) 
        .tabs('select', tabIndex) 
        .tabs("option","disabled", [0, 1]); 
       return false; 
      }); 
     }); 
</script> 

/AJAX提出と合併しました

<div id="tab-1" class="ui-tabs-panel ui-tabs-hide"> 
    <label for="title">Title</label> 
    <input type="text" id="title" name="title" size="60" autocomplete="off" value="<? $title ?>"/> 
      <div id="wmd-editor" class="wmd-panel"> 
        <div id="wmd-button-bar"></div> 
        <textarea id="wmd-input" name="wmd-input"></textarea> 
      </div> 
      <div id="wmd-preview" class="wmd-panel"></div> 
      <div id="wmd_result"></div> 
      <div id="title_input"style="padding:20px;"></div> 
</div> 

<div id="tab-2" class="ui-tabs-panel ui-tabs-hide"> 
    <label for="name">Name</label> 
    <input type="text" id="name" name="name" size="60" autocomplete="off" value="<? $name ?>"/> 
    <div id="name_input"></div>   
</div> 

PHP

<? 
if (isset($_POST['title'])){ 
    $wmdVal = $_POST['title']; 
     echo ('<div id="title_input"><span id="resultval"><h2>Title Echo result:</h2>'.$wmdVal.'</span></div>'); 
} 

if (isset($_POST['wmdVal'])){ 
     $wmdVal = $_POST['wmdVal']; 
     echo ('<div id="wmd_result"><span id="resultval"><h2>Description Echo result:</h2>'.$wmdVal.'</span></div>'); 
} 

if (isset($_POST['name'])){ 
    $name = $_POST['name']; 
     echo ('<div id="name_input"><span id="resultval"><h2>Description Echo result:</h2>'.$name.'</span></div>'); 
} 
?> 

Answer 1

は、私の知る限りでは、フィールドはタブ内にあるか、隠されている場合、 限り、彼らはIDを持っているとして、あなたがそれらを得ることができていない問題があります。 たとえば、$('#bla').val()を使用すると、IDが "bla"の要素が見つかるまでページ全体が検索されます。

ので、ちょうどそのよう、data optionに追加します。

{key1: 'value1', key2: 'value2'} 

試してみてください。

data: { "wmdVal": $("#wmd-preview").html() , "name": $("#name").val() , "title": $("#title").val() }, 

は（テストされていません）動作するはず

UPDATE：

あなたの座りを見た後eのソースコード私は問題を見つけたと思う。 次のボタンをクリックした結果、$ _POST ['title']変数（isset）があることがわかりますが、それは空です。あなたがのhtml()を探していない

$（ "＃タイトル"）HTML（）：

"タイトル"： だから 、この行のAjaxリクエストに問題がありますそのinput field。 あなたはval()を探しています。

変更に上記の行：

"タイトル"：$（ "＃タイトル"）のval（）

動作するようになりましたが、ない

Answer 2

の場合なら、私を更新タブを変更するたびにAJAX POSTを実行する必要があります。次の条件を削除する必要があります。if（currentTab == 0）{。これは、最初のTABが選択されたときにコードを実行させるためです。

これ以外にも、任意のデータを投稿することができます。あなたは単にそれを"data：" ajaxのプロパティに渡す必要があります。そして彼らはグローバルでユニークなので、IDでそれらのどれかを呼び出すことができます。そのような：地域：

data:{ 
     param1: $("#input1").val(), 
     param2: $("#input2").val(), 
     paramHtml1: $("#elementHtml1").html() 
    } 

Answer 3

"title": $("#title").html() should be 
"title": $("#title").val() -> you want the value of the field in question. This will send the correct value to the server. 

それは一種の何が「タイトルエコー結果」で印刷されていない、なぜ今、あなたが求めているように思えます。

私は良い次のステップがあるかもしれないと思う：あなたにいくつかの出力を与えるが、私はあなたが欲しい出力はおそらくないと思われます

success: function(result) { 
    // fill title_input with the result of the ajax call 
    $('#title_input').html(result); 
} 

。たぶんあなたが 'タイトルエコーエリア'でどんなコンテンツで反応するか