使用jquery下一步按钮单击Ajax提交各种输入值

Question

我目前正在使用jquery选项卡和ajax/post submit，而不需要刷新页面。有了一些指导，我能够在单击next按钮时获得div #wmd-preview的子级。问题是，当在各个选项卡中单击next按钮时，我还想提交其他字段。

单击next按钮时，如何在不同的选项卡中提交不同输入字段的输入值？示例

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

JS-下/上一个按钮与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>

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

 <?
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() },

是否有效(未经测试)

更新：

在看了你网站的源代码后，我想我找到了问题。从单击next按钮的结果可以了解到，有一个$POST‘’title‘变量(isset)，但是它是空的。因此，ajax请求中有一个问题，这一行：

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

你不是在找那个html() of input field。你在找val()。

将上面的行更改为：

“标题”：$("#title").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);
}

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