39630


<http://www.phppro.jp/school/phpschool/vol6/1>  
こちらの記事にあるuranai_result.phpを作成して実行してみすると、submitボタン押下前に入力した内容は一体何だったのか、分からないはずです。  
このサンプルでは入力項目が一つであり検知されるエラーも単一のため問題にならないと思うのですが、  
複数入力項目があって、検知されるエラーがそれ以上に内部に用意されている場合、リクエスト時の入力内容が維持されていることがユーザにとって望ましい気がします。  
エラー対象の入力項目だけを再入力すればよいわけで、その他入力項目まで再入力が強いられるのはユーザに易しくないと思いました。

# ====質問====

Webページの開発が乏しく、初歩的なことをお聞きしてしまいますが、標題の解決策を皆様はどういう方法で対処しているのでしょうか？ASP.NETで以前開発した際、この面ではViewStateという技術を利用していた記憶ですが、内部でhiddenの要素が生成されていたのですね、今回初めて知りました．．．。

尚、今取り組んでいるWebページですが、テーブルの中に複数行の入力項目がある感じなので、項目数が多いです。（テーブルの行をボタン押下で無限に増やせるようにしています=JQuery）

[code]

    ====PHP====
    <?php session_start(); ?>
    
    <!DOCTYPE html>
    <html>
        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
                <title>申請画面</title>
            <!-- Jquery -->
            <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
            <script type="text/javascript" src="js/entry.js"></script>
        </head>
    
        <body>
            <div class="wrapper">
                <h1 id="logo"><img src="img/common_header_logo001.gif" width="254" heigth="25" alt=""></h1>
                <form method="post" action="">
                    <div  class="ctrl">
                        <button type="button" class="iabtn">確認</button>
                        <input type="submit" value="更新" class="exbtn" name="exbtn"><br><br>
    
                        <?php include "php_classes/classes.php";
                            
                            if (isset($_POST["exbtn"])){
                                $sql1 = "ログインしている当事者の所属コードから、所属長をＤＢから取得するＳＱＬ文";
                                
                                try {
                                    //DBへ接続 【php_classes/classes.phpに接続先は書いてあります】
                                    $db = new ms0connect();
                                    $conn = $db->dbconnect();
                                    $stmt=$conn->prepare($sql1);
                                    $stmt->bindValue(":branch", $_SESSION["所属コード"], PDO::PARAM_STR);
                                    $stmt->execute();
    
                                    /************************************************************************************************
                                    * 所属長を導けた場合は、画面上の入力項目を業務テーブルに登録                 *
                                    * 当画面の主目的を　つらつらとコーディングの予定。                      *
                                    *                                               *
                                    * 但し、所属長を導けなかった場合、入力内容を画面上に維持して登録できないことを画面に訴えたい！！*
                                    *************************************************************************************************/
    
    
                                    $conn = null;
    
                                } catch (PDOException $e) {
                                    error_log("### SQL Serverデータ取得失敗 ⇒".$sql1."###".$e->getMessage(),0);
                                    exit();
                                } 
                            }
    
                        ?>
    
    
                        <br><br>
                    </div>
                    <div class="appHeader">
                        <table>
                            <tr>
                                <td>コード</td>
                                <td>品名</td>
                            </tr>
                        </table>
                    </div>
                    <div class="appLines">
                        <table>
                            <tr class="appLineDummy">
                                <td><input type="text" name="cd" style="width:45px; ime-mode: inactive;"></td>
                                <td><input type="text" name="amount" style="width:45px;"></td>
                                <td><button class="rowins" type="button">+</button></td>
                                <td><button class="rowdel" type="button">-</button></td>
                            </tr>
                        </table>
                    </div>
                    <div class="appBottom">
                        <table>
                            <tr class="appBottom">
                                <td>伝票備考</td>
                                <td><input type="text" name="bottomtext" style="width:800px"></td>
                            </tr>
                        </table>
                    </div>
                </form>
            </div>
        </body>
    </html>
    
    ====JS====
    $(function() {
        //この画面ではエンターキーの操作を無効にしました
        $("*").keypress(function(e){
            if((e.which == 13) || (e.keyCode == 13)){ return false; }
        });
    
        //ブラウザの戻るボタン・ＢＳキーを操作しても遷移元ページへ移ることを防ぐ
        history.pushState(null, null, null);
        window.addEventListener("popstate", function() {
            history.pushState(null, null, null);
        });
    
    
        var $dummyRow = $("tr.appLineDummy");
    
        // テーブル行追加
        $(document).on("click", ".rowins", function(e) {
            var $row = $(e.target).closest("tr");
            addRowBelow($row);
        });
        // テーブル行削除
        $(document).on("click", ".rowdel", function(e) {
            var row = $(this).closest("tr").remove();
            $(row).remove();
            downtotalCalc();
        });
    
        //### 初回の画面呼び出し時 10行の明細を生成 ###//
        $(document).ready(function(){
            for(var i = 0; i < 10; i++) {
                addRowBelow($dummyRow);
            }
        });
    
    
    });
    
[/code]


CC BY-SA 3.0
2017-11-15T00:03:43.323
39580
2017-11-16T14:45:59.723
2020-06-17T08:14:45.997
-1
25696
question
javascript php jquery
SUBMIT後に画面上のエラーが発覚した場合、入力内容を維持したい（PHP）


質問者さんがコメントでおっしゃっている「つまり自画面のPHPで画面上の内‌​容を処理することを考えてきています。
」というのがそのまんま、formのアクションに自分自身のphpを指定する(参考にされている例だとuranai_result.phpを指定する)ことです。  
例では、入力のフォームを部分に記述していますが、これもphpで出力するようにして、

[code]

    <?php  
    $html = '';
    if (isset($_POST["uranai"])) { 
        if (/* エラー判定 */) {
            // エラーの場合
            $html = <<< EOL
    <form action="uranai_result.php" method="post"> 
    年齢を教えてください：
    <input type="text" name="age" value='
    EOL;
            $html += $_POST["age"];
            $html += <<< EOL
    '> 
    <input type="submit" name="uranai" value="占う！"> 
    </form> 
    EOL;
        } else {
            // エラーでない場合
            // 結果表示
            (省略)
        }
    } else {
        $html = <<< EOL
    <form action="uranai_result.php" method="post"> 
    年齢を教えてください： 
    <input type="text" name="age" value=""> 
    <input type="submit" name="uranai" value="占う！"> 
    </form> 
    EOL;
    }
    ?> 
    <html>
    <body> 
    <?php
    if (isset($html)) {
        echo $html;
    }
    ?>
    </body> 
    </html>
    
[/code]

こんな感じで記述してみてはどうでしょうか？(ちょっと冗長な書き方ですが、その方が理解しやすいかなと思って書いてます)


CC BY-SA 3.0
2017-11-16T01:55:58.280
39606
2017-11-16T08:27:56.483
2017-11-16T08:27:56.483
9515
9515
39580
answer


結構ザックリ書きました。  
行き成り全部作って完成を目指すより、  
最小の機能で作って、機能を追加していく方が学びやすく実装しやすいのではないでしょうか？  
("フォームからPHPにリクエストする"→"PHPでリクエストデータからフォームを作成する"  
→"リクエストデータを処理しエラー判定する"のように段階を踏んでは？)

  1. PHPが処理されるタイミング  
PHPはサーバ側のスクリプト言語なのでJavaScriptのようにクライアント側では動作できません。  
PHPページのソースをブラウザで見ると分かるかと思いますが、その中にPHPの記述は一切ないかと思います。  
それはサーバ側で既にPHPを処理し終わっていて、クライアント(ブラウザ)に来るときにはHTMLで作られたWebページになっているからです。

  2. 同じnameをForm内で複数使う  
同じnameを複数使用するとリクエストを受け取った際に最初の1つ目の値しか取れません。  
もし、同じnameを使用するのであれば`name="label[]"`のように`[]`を使用し配列で渡しましょう。

  3. リクエストに不備があった場合にHTMLに再展開する  
もし、エラーが発生した場合に再度展開するのであれば、テーブルはPHPで出力しておきましょう。

  4. (蛇足)デザイン次第ですがtableにラベル(タイトル)を付けるのであれば`<thead>`内で`<th>`を使用するのが良いかもしれません。

※ミニマムで自己POST

[code]

    <?php 
    //初期化(エラーがなかったり、初回の場合に空の入力フォーム出力用)
    $datas = array(
        'cd'=>array(""),
        'amount'=>array("")
    );
    //cd及びamountがリクエストに存在し、値を持っている場合
    if(!empty($_POST['cd']) && !empty($_POST['amount'])){
        //色々処理
        if(true){//もしエラーだったら(サンプル用にとりあえずtrueで処理)
            //エラーデータが存在するなら展開用配列に代入
            $datas['cd'] = $_POST['cd'];
            $datas['amount'] = $_POST['amount'];
        }
    }
    
    ?><!DOCTYPE html>
    <html>
        <head>
            <!-- 省略 -->
        </head>
        <body>
            <div class="wrapper">
                <!-- 省略 -->
                <form method="post" action="./index.php"><!-- actionに、このphpファイル自身を指定する -->
                    <div  class="ctrl">
                        <input type="submit" value="更新" class="exbtn" name="exbtn">
                    </div>
                    <div class="appHeader">
                        <!-- 省略 -->
                    </div>
                    <div class="appLines">
                        <table>
    <?php
                    //展開用データに入ってる値分ループ
                    foreach($datas['cd'] as $key=>$cd){
                        $amount = $datas['amount'][$key];
                        //行を追加
                        print <<<EOB
                            <tr class="appLineDummy">
                                <td><input type="text" value="{$cd}" name="cd[]" style="width:45px; ime-mode: inactive;"></td>
                                <td><input type="text" value="{$amount}" name="amount[]" style="width:45px;"></td>
                                <td><button class="rowins" type="button">+</button></td>
                                <td><button class="rowdel" type="button">-</button></td>
                            </tr>
    EOB;
                    }
    ?>
                        </table>
                    </div>
                    <div class="appBottom">
                        <!-- 省略 -->
                    </div>
                </form>
            </div>
        </body>
    </html>
    
[/code]


CC BY-SA 3.0
2017-11-16T14:45:59.723
39630
2017-11-16T14:45:59.723
39580
answer