gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 13:16:45 29 4
gpt4 key购买 nike

我目前正在使用 jquery ui 选项卡(仅适用于下一个/上一个按钮)和一个文本区域。我开发了一个 ajax/js 函数,它将自动提交存储在文本区域中的值,而 php 在 tab#2 中回显结果。但是我目前想将方法从自动提交表单更改为当用户单击“下一步”按钮前进到下一个时提交。单击 jquery ui 选项卡中的下一步按钮时,如何在文本字段中提交值?这是我的 EXAMPLE自动提交

上一个/下一个

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

关于javascript - 使用 jquery UI 下一个按钮提交输入字段值,php 回显结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11754774/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com