我目前正在使用jQuery UI选项卡和Ajax /后提交不刷新页面。具有一定的指导我已经能够获得的股利＃wmd- ​​preVIEW 点击下一步按钮时submited。问题是，我也有其他的领域，我将要提交在同一时间被点击不同的选项卡下一个按钮时。

点击下一步按钮时，我怎样才能提出在不同的标签各种输入字段的输入值？ 实例

（对于一些测试我现在有其他输入字段提交与KEYUP和定时器设置）的

JS- NEXT / previous按钮提交/ AJAX

 ＆LT;脚本＆GT;
        变种currentTab = 0;
          $（函数（）{
            变量$标签= $（'＃标签）。标签（{
                禁用：[0，1，2]
                ，选择：函数（）{
                    如果（currentTab == 0）{
                        $阿贾克斯（{
                        键入：POST，
                        网址：test1.php
                        数据：{wmdVal：$（＃wmd- ​​preVIEW）HTML（）}，
            成功：函数（结果）{
                $（'＃wmd_result）HTML（$（'＃resultval，结果）。html的（））;
            }
                      }）;
                    }
                }
                ，显示：功能（事件，UI）{
                    currentTab = ui.index;
                }
            }）;

            $（UI-标签面板）。每个（函数（一）{
                VAR totalSize = $大小（） -  1（UI-标签面板。）。
                如果（我！= totalSize）{
                    接下来= I + 2;
                    $（本）.append（＆LT; A HREF =＃类='下一个标签发相对='+接下来+'＆gt;接下来页面和放大器;＃187;＆LT; / A＆gt;中）;
                }
                如果（ⅰ！= 0）{
                    preV =我;
                    $（本）.append（＆LT; A HREF =＃类='preV-标签先行者相对='+ preV +'＆GT;＆安培;＃171; preV页及所述; / A＆gt;中）;
                }
            }）;

            $（'。下一个选项卡，。preV-选项卡）。点击（函数（）{
                VAR的tabIndex = $（本）.attr（相对）;
                $ tabs.tabs（启用，的tabIndex）
                    .tabs（选择，的tabIndex）
                    .tabs（选项，残障人士，[0,1]）;
                返回false;
            }）;
        }）;
＆LT; / SCRIPT＆GT;
 

HTML

 ＆LT; D​​IV ID =标签-1级=UI-标签面板UI的标签隐藏＆GT;
  ＆LT;标签=头衔 -  GT;标题＆LT; /标签＆gt;
  ＆LT;输入类型=文本ID =标题名称=标题大小=60自动完成=关闭值=＆LT ;? $标题＆GT;/＆GT;
           ＆LT; D​​IV ID =大规模杀伤性武器的编辑器级=大规模杀伤性武器面板＆GT;
                    ＆LT; D​​IV ID =大规模杀伤性武器按钮栏＆GT;＆LT; / DIV＆GT;
                    ＆LT; textarea的ID =大规模杀伤性武器输入NAME =大规模杀伤性武器输入＆GT;＆LT; / textarea的＆GT;
           ＆LT; / DIV＆GT;
           ＆LT; D​​IV ID =wmd- ​​preVIEW级=大规模杀伤性武器面板＆GT;＆LT; / DIV＆GT;
           ＆LT; D​​IV ID =wmd_result＆GT;＆LT; / DIV＆GT;
           ＆LT; D​​IV ID =title_input的风格=填充：20像素;＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;

＆LT; D​​IV ID =标签-2级=UI-标签面板UI的标签隐藏＆GT;
    ＆LT;标签=名与GT;名称＆LT; /标签＆gt;
    ＆LT;输入类型=文本ID =名称NAME =名字大小=60自动完成=关闭值=＆LT ;? $名称＆gt;/＆GT;
    ＆LT; D​​IV ID =name_input＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

PHP

 ＆LT ;?
如果（使用isset（$ _ POST ['标题']））{
    $ wmdVal = $ _ POST ['标题'];
        回声（＆LT; D​​IV ID =title_input＆GT;＆LT;跨度ID =resultval＆GT;＆LT; H2＆GT;标题回声结果：其中; / H＆GT;'。$ wmdVal'＆LT; / SPAN＆GT;＆LT; / DIV＆GT;'）;
}

如果（使用isset（$ _ POST ['wmdVal']））{
        $ wmdVal = $ _ POST ['wmdVal'];
        回声（。'＆LT; D​​IV ID =wmd_result＆GT;＆LT;跨度ID =resultval＆GT;＆LT; H2＆GT;简介回声结果：其中; / H＆GT;'$ wmdVal'＆LT; / SPAN＆GT;＆LT; / DIV＆GT;'）;
}

如果（使用isset（$ _ POST ['名称']））{
    $名称= $ _ POST ['名称'];
        回声（。'＆LT; D​​IV ID =name_input＆GT;＆LT;跨度ID =resultval＆GT;＆LT; H2＆GT;简介回声结果：其中; / H＆GT;'$名字'＆LT; / SPAN＆GT;＆LT; / DIV＆GT;'）;
}
？＆GT;
 

解决方案

据我所知，有没有问题，如果该字段在标签或隐藏的， 只要有身份证，就可以得到他们。 当使用，例如： $（'＃BLA）VAL（），它会搜索整个页面，直到它找到ID为喇嘛的元素。

因此​​，只需将其添加到数据选项，这样的：

  {键：值1，KEY2：值2'}
 

尝试：

 数据：{wmdVal：$（＃wmd- ​​preVIEW）HTML（），名：$（＃NAME）VAL（ ），头衔：$（＃题）VAL（）}，
 

应工作（没有测试过）

更新：

在看着你的网站的源$ C ​​$ C我想我找到了问题。 从点击下一步按钮的结果可以理解，有一个$ _ POST ['标题']变量（使用isset），但它是空的。 所以这是在Ajax请求的问题， 该行：

头衔：$（＃题）HTML（）

您不是在寻找的 HTML（）的输入字段的。 您正在寻找 VAL（）。

改变上面的一行：

头衔：$（＃题）VAL（）

如果现在的工作，更新我，如果不是

I am currently working with jquery ui tabs and ajax/post submit without page refresh. With some guidance I have been able to get the div #wmd-preview submited when clicking the next button. The issue is that I also have other fields I will like to submit at the same time when the next button is clicked in various tabs.

How can I submit the input values of various input fields in different tabs when clicking the next button? EXAMPLE

(for some testing i currently have the other input fields submit with keyup and timer setup)

JS- NEXT/Previous button merged with submit/ajax

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

HTML

<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>');
}
?>  

As far as i know , there's no matter if the fields are in tabs or hidden , as long as they have ID , you can get them. When using , for instance: $('#bla').val() , it will search the whole page until it will find an element with the ID "bla".

Therefore , just add it to the data option, like that:

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

Try:

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

Should work (not been tested)

UPDATE:

After looking at your site's source code I think I found the problem. From the results of clicking the next button you can understand that there's a $_POST['title'] variable (isset) , however it's empty. So there's a problem in the ajax request, This line:

"title": $("#title").html()

You're not looking for the html() of that input field. You're looking for val().

Change the line above to:

"title": $("#title").val()

Should work now, update me if not