javascript - Ajax 使用 jquery UI 提交各种输入值，然后单击下一个按钮

Question

我目前正在使用 jquery ui 选项卡和 ajax/post 提交，无需刷新页面。在一些指导下，我已经能够在单击下一步按钮时提交 div #wmd-preview。问题是，当在各个选项卡中单击下一个按钮时，我还想同时提交其他字段。

点击下一步按钮时，如何提交不同标签中各个输入字段的输入值？ EXAMPLE

(对于一些测试，我目前有其他输入字段通过 keyup 和计时器设置提交)

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

据我所知，无论字段是在选项卡中还是隐藏， 只要他们有身份证，你就可以得到他们。 使用 时，例如:$('#bla').val() ，它将搜索整个页面，直到找到 ID 为“bla”的元素。

因此，只需将其添加到data 选项，如下所示:

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

尝试:

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

应该可以工作(未经测试)

更新:

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

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

您不是在寻找该输入字段 的html()。 您正在寻找 val()。

将上面的行更改为:

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

现在应该可以了，如果不行请更新我