php - ボタンクリックで入力フィールド値を送信

Question

ボタンのクリックで送信すると思われる 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 &#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エコーアウトされる場所です

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

score 3 · Accepted Answer

いくつかのコメント:

最初に、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 同一の ID が 2 つあります - 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, 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 &#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>

 </body>
 </html>

そして、これは私の「tabs.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>');
                       }
?>

他に何かあれば教えてください。

score 1 · Accepted Answer

最初に 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"']

コードを調べてクリーンアップする

php - ボタンクリックで入力フィールド値を送信

2 に答える 2

Related

Reference