Ajax使用jquery UI下一次按钮提交各种输入值

Question

我目前正在使用jquery ui tabs和ajax/post submit而不刷新页面.通过一些指导,我可以#wmd-preview在单击下一个按钮时提交div .问题是,当在各个选项卡中单击下一个按钮时,我还要同时提交其他字段.

单击下一个按钮时,如何在不同选项卡中提交各种输入字段的输入值？例

(对于某些测试,我目前使用keyup和timer设置提交其他输入字段)

JS- NEXT/Previous按钮与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>');
}
?>  

Answer 1

据我所知,无论字段是在标签中还是隐藏的,只要它们有ID,就可以获得它们.例如:当使用时,$('#bla').val()它将搜索整个页面,直到它找到ID为"bla"的元素.

因此,只需将其添加到data option,就像:

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

尝试:

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

应该工作(未经过测试)

更新:

在查看了您网站的源代码后,我认为我发现了问题.从单击下一个按钮的结果中你可以理解,有一个$ _POST ['title']变量(isset),但它是空的.所以在ajax请求中有一个问题,这一行:

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

你不是在寻找html()那个input field.你在找val().

将上面的行更改为:

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

现在应该工作,如果没有,请更新我