使用jquery UI next按钮提交输入字段值，php将返回结果

Submit input field value with jquery UI next button and php echo the result

本文关键字：php 结果 返回 字段 输入 UI jquery next 按钮 提交 使用      更新时间：2023-09-26

我目前使用jquery ui选项卡（仅适用于下一个/上一个按钮）和文本区域。我开发了一个axax/js函数，它将自动提交存储在文本区域中的值，php将在标签2中返回结果。但我目前想将方法从自动提交表单更改为当用户单击"下一步"按钮时提交，以前进到下一步。单击jquery ui选项卡中的下一个按钮时，如何在文本字段中提交值？这是我的自动提交示例

上一个/下一个

<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;
});
});

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>

===更新===

如果您真的想暂时看到测试的结果，请再次将成功处理程序添加到ajax参数中：

success: function(result) {
    $('#wmd_result').html( $('#resultval', result).html()); 
}

并将结果div再次附加到第一个选项卡的末尾：

<div id="wmd_result"></div>
相关文章：