Javascript 使用jQueryUINEXT按钮提交输入字段值，php响应结果_Javascript_Jquery_Ajax

Javascript 使用jQueryUINEXT按钮提交输入字段值，php响应结果

javascript jquery ajax

Javascript 使用jQueryUINEXT按钮提交输入字段值，php响应结果,javascript,jquery,ajax,Javascript,Jquery,Ajax,我目前正在使用jQueryUI选项卡（仅适用于下一个/上一个按钮）和文本区域。我开发了一个ajax/js函数，它将自动提交存储在文本区域中的值，php将结果回送到选项卡2中。但是我现在想把自动提交表单的方法改为当用户点击下一步按钮时提交到下一步。单击jquery ui选项卡中的“下一步”按钮时，如何提交文本字段中的值？这是我与autosubmit的联系上一个/下一个 <script> $(function() { var $tabs = $('#tabs').tabs({

我目前正在使用jQueryUI选项卡（仅适用于下一个/上一个按钮）和文本区域。我开发了一个ajax/js函数，它将自动提交存储在文本区域中的值，php将结果回送到选项卡2中。但是我现在想把自动提交表单的方法改为当用户点击下一步按钮时提交到下一步。单击jquery ui选项卡中的“下一步”按钮时，如何提交文本字段中的值？这是我与autosubmit的联系

上一个/下一个

<script>
$(function() {
    var $tabs = $('#tabs').tabs({
    disabled: [0, 1] });
    $(".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;
});

});


$（函数（）{
变量$tabs=$（'#tabs'）。tabs({
已禁用：[0，1]}）；
$（“.ui选项卡面板”）。每个（功能（i）{
var totalSize=$（“.ui选项卡面板”）.size（）-1；
如果（i！=总尺寸）{
next=i+2；
$（此）。追加（“”）；
}
如果（i！=0）{
prev=i；
$（此）。追加（“”）；
}
});
$（'.next tab，.prev tab'）。单击（function（）{
var tabIndex=$（this.attr（“rel”）；
$tabs.tabs（'enable'，tabIndex）
.tabs（'select'，tabIndex）
.选项卡（“选项”、“禁用”、[0,1]）；
返回false；
});
});

HTML/PHP

<?
  if (isset($_POST['wmdVal'])){
    $wmdVal = $_POST['wmdVal']; 
        echo ('<div id="wmd_result"><span id="resultval"><h2>PHP Echo result:</h2>'.$wmdVal.'</span></div>');
}
?>

<textarea id="wmd-input" name="wmd-input"></textarea>
<input type="hidden" id="myhidden" name="myhidden" value="<? $wmdVal ?>">

记住您在哪个选项卡上（currentTab
）。如果选择了某个页签，检查第一个页签是否离开；如果是，则发送带有当前预览html的ajax请求；不需要成功处理程序，我们不需要任何客户端更改。如果显示下一个选项卡，请重置currentTab
索引。在服务器端（php），您可以将数据保存到数据库中，但不需要任何结果
<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Hello</title>
    <link type="text/css" href="css/postingtabs.css" rel="stylesheet">
    <link type="text/css" href="css/wmd.css" rel="stylesheet">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js"></script>
    <script type="text/javascript" src="js/wmd.js"></script>
    <script type="text/javascript" src="js/showdown.js"></script>

    <script type="text/javascript">
        var currentTab = 0;

        $(function() {
            var $tabs = $('#tabs').tabs({
                disabled: [0, 1]
                , select: function() {
                    if (currentTab == 0) {
                        $.ajax({
                            type: "POST",
                            url: "test1.php",
                            data: { "wmdVal": $("#wmd-preview").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>
</head>
<body>
    <div id="page-wrap">
        <div id="tabs">
            <ul>
                <li><a href="#tab-1">1</a></li>
                <li><a href="#tab-2">2</a></li>
            </ul>

            <div id="tab-1" class="ui-tabs-panel ui-tabs-hide">
                <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>

            <div id="tab-2" class="ui-tabs-panel ui-tabs-hide"></div>
        </div>
    </div>
</body>
</html>

并将结果div
再次附加到第一个选项卡的末尾：
<div id="wmd_result"></div>


这太完美了！再次感谢你，我的朋友。经过尝试和测试，工作完美。嘿，我的朋友，以防你看不到。这是我的下一个问题：
<div id="wmd_result"></div>