当前位置: 首页 > 面试题库 >

使用jquery UI的下一个按钮提交输入字段值,php回显结果

居琛
2023-03-14
问题内容

我目前正在使用jQuery用户界面选项卡(仅适用于下一个/上一个按钮)和textarea。我开发了一个ajax /
js函数,该函数将自动提交存储在文本区域中的值,并且php在tab#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>


 类似资料:
  • 问题内容: 我有以下代码,基本上它正在执行两个操作。第一个是将我的表单数据提交到google电子表格,另一个操作是将我的第二个表单文本框值数据提交到另一个页面文本框值。这个怎么做? 从上面可以看到,这是第一页,第二页是第二种形式的Sankranthi_Reserv2.asp。我想在那儿传递文本框值,所以问题是第一种形式是提交给Google文档并存储数据,但是第二种形式需要将手机号码文本框值传递给下

  • 我已经使用HTTPClient连接到一个网站,我可以成功地访问所需的数据从网站使用jSoup.我有以下代码,我需要从中提取提交按钮信息。 如何访问提交按钮的值和名称?

  • 我目前有下拉选择和使用JavaScript显示/隐藏值的工作代码,这取决于所选择的内容,正如你可以看到下面的代码。我想做的是,根据新建和使用的选择,有三种不同的表单输入。如果选择使用,它会直接进入带有输入的表单。如果你选择新的,它会带来另一个下拉列表,你可以选择租赁或购买,并根据这一点选择另外两个表单显示。我知道如何提交一个表单只是一个表单到PHP使用POST。但是,我的问题是,因为根据下拉,表单

  • 问题内容: 当用户输入一个值并按时,为什么只有一个字段的a会重新加载表单,而如果其中有2个或更多字段,则为什么没有? 我写了一个简单的页面来测试这种奇怪的情况。 如果您以第二种形式输入值并按Enter键,您会看到它重新加载了通过输入值的页面,就像您调用一样。为什么?以及如何避免呢? 问题答案: 这是一个鲜为人知的“ Quirk”,已经问世了一段时间。我知道有人以各种方式解决了它。 在我看来,最简单

  • 我正在尝试使用php和mysql进行在线测验/调查!我第一次使用php!我想做的是从我的数据库中获取问题和它的多项选择(测验和表格问题,其中Qid、Qtext、Ans1..Ans4作为其6列),一旦用户完成测验,就按下最后一个问题的提交按钮。。所有答案应保存在Db中(测验和表格答案,以Aid、Ans、Qid作为其列)!我搜索了相关的代码,但一个都听不懂。如果有人能帮忙,我将不胜感激。谢谢

  • 问题内容: 如果字段不正确,我想防止用户单击“注册”按钮。部分原因是必须填写某些字段。但条件开始变得有点长: 我该如何简化呢? 问题答案: 我认为您需要为表单内的输入字段提供属性,因此在表单中填写字段之前将是无效的。同样,您也可以在输入中提供其他验证属性。 例:-