Ajax 使用 jquery UI next button click 提交各种输入值

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 option，就像这样：

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

试试：

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

应该可以工作（未经测试）

更新：

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

“标题”：$(“#title”).html()

您不是在寻找 html() 中的 input field。 你正在寻找val()。

将上面的行改为：

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

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

Answer 2

如果您想在更改选项卡时运行 AJAX POST。您必须删除此条件：if(currentTab == 0){。因为这个是强制代码运行，就在第一个TAB被选中的时候。

除此之外，您还可以发布您想要的任何数据。您只需要将它们传递给 ajax 的 "data:" 属性。而且由于它们是全局且唯一的，因此您可以通过它们的 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);
}

这会给你一些输出，但我认为可能不是你想要的输出。也许在“标题回显区域”中回复您想要的内容