我正在使用一个ajax表单,它应该通过单击按钮提交。我见过类似的项目,但我遇到了死胡同。我遇到的问题是输入字段值在选项卡 2 中没有得到回显。我设置了一个参数var currentTab
以指示和比较何时单击下一个选项卡。
- 单击后如何显示输入字段的值?
- (附加)如果将来我有多个带有输入字段的选项卡,并且最后一个选项卡将是值得到php回显的地方,那么如何调整代码?
谢谢
AJAX/JS 函数
<script>
var currentTab = 0;
$(function() {
var $tabs = $('#tabs').tabs({
disabled: [0, 1]
, select: function() {
if (currentTab == 0) {
$.ajax({
type: "POST",
url: "tabs.php",
data: { "textarea": $("#textarea_input").html(),
"title": $("#title_input").html()
},
success: function(result) {
$("#tab-2").html(result);
}
});
}
}
, 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 »</a>");
}
if (i != 0) {
prev = i;
$(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>« 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>
.PHP
<?
if (isset($_POST['title'])){
$title = $_POST['title'];
echo ('<div id="title_result"><span class="resultval"><h2>Title Echo result:</h2>'.$title.'</span></div>');
}
if (isset($_POST['textarea'])){
$textarea = $_POST['textarea'];
echo ('<div id="textarea_result"><span class="resultval"><h2>Textarea Echo result:</h2>'.$textarea.'</span></div>');
}
?>
HTML Tab2 是结果应该被 php 回显出来的地方
<div id="tab-1" class="ui-tabs-panel ui-tabs-hide">
<label for="title">Title</label>
<input type="text" id="title_input" name="title_input" size="60" autocomplete="off" value="<?=$title?>"/><br>
<label for="textarea_input">Textarea</label>
<textarea id="textarea_input" name="textarea_input"><?=$textarea?></textarea>
</div>
<div id="tab-2" class="ui-tabs-panel ui-tabs-hide">
<div id="title_result" style="padding:20px;"></div>
<div id="textarea_result" style="padding:20px;"></div>
</div>
一些评论:
你应该首先从 PHP 添加回显的 html,然后你才能使用 $("#resultval") 从 jquery 访问它
我会解释 - 看看你的"成功"处理程序
success: function(result) {
$('#textarea_result').html( $('#resultval', result).html());
$('#title_result').html( $('#resultval', result).html());
}
代码应该是
success: function(result) {
$('#textarea_result').html( result);
$('#title_result').html( result);
}
如果有的话......但我不认为这是你的意思。
如果你想问我 - 在PHP中渲染整个下一个选项卡并做一些类似$("#tab2").html(result);
评论 #2您有 2 个相同的 ID - 结果值。
评论 #3 -您在 Ajax 中发送"textarea"和"title",但指的是 $_POST["textarea_input"] 和 $_POST["title-input"]
评论 #4 -您正在使用$("#textarea-input").html()
而不是$("#textarea-input").val()
来获取值。与"title_input"相同
这是我的工作版本(只需删除"头部"内容)。
这是我的主要.php -
<html>
<head>
<link rel="stylesheet" type="text/css" href="/stackoverflow/public/jquery-ui-1.8.22.custom.css" media="screen" />
<script src="/stackoverflow/public/jquery-1.7.2.min.js"></script>
<script src="/stackoverflow/public/jquery-ui-1.8.22.custom.min.js"></script>
</head>
<body>
<div id="page-wrap">
<div id="tabs">
<ul>
<li><a href="#tab-1"> TAB1</a></li>
<li><a href="#tab-2"> TAB2</a></li>
</ul>
<div id="tab-1" class="ui-tabs-panel ui-tabs-hide">
<label for="title_input">Title</label>
<input type="text" id="title_input" name="title_input" size="60" autocomplete="off" value="my title"/><br>
<label for="textarea-input">Textarea</label>
<textarea id="textarea-input" name="textarea-input"></textarea>
</div>
<div id="tab-2" class="ui-tabs-panel ui-tabs-hide">
</div>
</div>
</div>
<script>
var currentTab = 0;
$(function() {
var $tabs = $('#tabs').tabs({
disabled: [0, 1]
, select: function() {
console.log("selecting a new tab " + currentTab);
if (currentTab == 0) {
$.ajax({
type: "POST",
url: "tabs.php",
data: { "textarea": $("#textarea-input").val(),
"title": $("#title_input").val()
},
success: function(result) {
$("#tab-2").html(result);
}
});
}
}
, 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 »</a>");
}
if (i != 0) {
prev = i;
$(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>« 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>
</body>
</html>
这是我的"标签.php"
我的工作示例可以在我的网站上找到
<?php
echo "This is the result are you ready?";
if (isset($_POST['title'])){
$title = $_POST['title'];
echo ('<div id="title_result"><span id="resultval"><h2>Title Echo result:</h2>'.$title.'</span></div>');
}
else{
echo "title_input is not defined!";
}
if (isset($_POST['textarea'])){
$textarea = $_POST['textarea'];
echo ('<div id="textarea_result"><span id="resultval"><h2>Textarea Echo result:</h2>'.$textarea.'</span></div>');
}
?>
如果还有其他事情,请告诉我。
你可能想先清理你的 HTML 并正确使用 PHP...您的 HTML 选项卡 2 应该是:
<div id="tab-1" class="ui-tabs-panel ui-tabs-hide">
<label for="title">Title</label>
<input type="text" id="title_input" name="title_input" size="60" autocomplete="off" value="<?=$title?>"/><br>
<label for="textarea-input">Textarea</label>
<textarea id="textarea-input" name="textarea-input"><?=$textarea?></textarea>
</div>
<div id="tab-2" class="ui-tabs-panel ui-tabs-hide">
<div id="title_result" style="padding:20px;"></div>
<div id="textarea_result" style="padding:20px;"></div>
</div>
你的名字后面有一个额外的引号title_input当你想吐出没有回声的PHP代码时,像这样使用它:
<?=$title?>
另外顺便说一下,你的PHP中还有其他脏代码......这:
if (isset($_POST['title_input"'])){
$title = $_POST['title_input"'];
echo ('<div id="title_result"><span id="resultval"><h2>Title Echo result:</h2>'.$title.'</span></div>');
}
应该是:
if (isset($_POST['title_input'])){
$title = $_POST['title_input"'];
echo ('<div id="title_result"><span id="resultval"><h2>Title Echo result:</h2>'.$title.'</span></div>');
}
你在这里的 PHP 中有一个额外的引用:
$_POST['title_input"']
检查并清理代码