php – 单击按钮提交输入字段值

发布时间：2020-12-13 17:12:55 所属栏目：PHP教程来源：网络整理

导读：我正在使用一个ajax表单,它假设通过单击按钮提交.我见过类似的项目,但我遇到了死胡同.我遇到的问题是输入字段值没有在选项卡2中得到回显.我设置了一个参数var currentTab来指示和比较何时对下一个选项卡进行了点击. 如何在单击后显示输入字段的值？ (附加)如

我正在使用一个ajax表单,它假设通过单击按钮提交.我见过类似的项目,但我遇到了死胡同.我遇到的问题是输入字段值没有在选项卡2中得到回显.我设置了一个参数var currentTab来指示和比较何时对下一个选项卡进行了点击.

>如何在单击后显示输入字段的值？
>(附加)如果将来我有多个带有输入字段的选项卡,最后一个选项卡将是值得到的回声,如何调整代码？

谢谢

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

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 echo out的地方

<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(结果);

评论#2
你有2个相同的ID – resultval ..

评论#3 –
你在Ajax中发送“textarea”和“title”,但引用$_POST [“textarea_input”]和$_POST [“title-input”]

评论#4 –
您正在使用$(“#textarea-input”).html()来获取值而不是$(“#textarea-input”).val().同样的“title_input”

这是我的工作版本(只需删除“头”的东西).

这是我的main.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,select: function() {
                    console.log("selecting a new tab " + currentTab);
                    if (currentTab == 0) {
                        $.ajax({
                            type: "POST",data: { "textarea": $("#textarea-input").val(),"title": $("#title_input").val()
                   },success: function(result) {
                        $("#tab-2").html(result);

                    }       
                        });

        }
                },1]);
    return false;
            });
});
 </script>

 </body>
 </html>

这是我的“tabs.php”

我的工作示例可以在my site找到

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

让我知道是否还有其他事情.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!