0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Form内の送信ボタンがsubmitできない

Posted at

入力フォームを作成中、ボタンを押しても画面遷移しなかったので対策を自分用に残しておきます。

画面遷移の流れ

入力画面→確認画面(ここで問題発生)→完了画面

ファイル構成

form
 └input.php   //入力画面
 └confirm.php //確認画面・完了画面
 
 ※確認画面・完了画面はフラグで切替え。

ソース

input.php
<!DOCTYPE html>
<meta charset="utf-8">
<header>

    <body>
        入力画面</br>
        </br>
        <form method="POST" action="confirm.php">
            氏名</br>
            <input type="text" name="my-name">
            </br>
            メールアドレス</br>
            <input type="email" name="email">
            </br>
            <input type="submit" name="confirm-btn" value="確認ボタン">
        </form>
    </body>
</header>
</html>

comfirm.php
<!-- 確認・完了画面-->
<!-- 条件によって表示する画面を切り替える -->
<?php
$pageFlg = 1;
var_dump($_POST['submit-btn']);
if (!empty($_POST['confirm-btn'])) {
    $pageFlg = 0;
    //echo '0です';
} else if (!empty($_POST['submit-btn'])) {
    $pageFlg = 1;
    echo '1です';
}
?>
<!DOCTYPE html>
<meta charset="utf-8">
<header></header>

<body>
    画面名</br>
    <!-- 確認画面 -->
    <?php if ($pageFlg === 0) : ?>
        └確認画面</br>
        氏名</br>
        <?php echo $_POST['my-name']; ?></br>
        e-mail</br>
        <?php echo $_POST['email']; ?></br>
        <input type="back">
        <input type="submit" name="submit-btn" value="完了ボタン">
    <?php endif ?>
    <!-- 完了画面 -->
    <?php if ($pageFlg === 1) : ?>
        └完了画面
        </br>
        送信完了しました。
    <?php endif ?>
</body>
</html>

input.phpの送信ボタンは機能するのに、comfirm.phpの確認ボタンはなぜ機能しないのだろう…?違いは?

原因

<form></form>の中にボタンが入っていなかった。
ボタンを<input>タグで作成する場合、formタグ内に記述する必要があった。

対策

<form>タグの追加

confirm.php
<!-- 確認・完了画面-->
<!-- 条件によって表示する画面を切り替える -->
<?php
$pageFlg = 1;
var_dump($_POST['submit-btn']);
if (!empty($_POST['confirm-btn'])) {
    $pageFlg = 0;
    //echo '0です';
} else if (!empty($_POST['submit-btn'])) {
    $pageFlg = 1;
    echo '1です';
}
?>
<!DOCTYPE html>
<meta charset="utf-8">
<header></header>

<body>
    <!--追加-->
    <form>
        画面名</br>
        <!-- 確認画面 -->
        <?php if ($pageFlg === 0) : ?>
            └確認画面</br>
            氏名</br>
            <?php echo $_POST['my-name']; ?></br>
            e-mail</br>
            <?php echo $_POST['email']; ?></br>
            <input type="back">
            <input type="submit" name="submit-btn" value="完了ボタン">
        <?php endif ?>
        <!-- 完了画面 -->
        <?php if ($pageFlg === 1) : ?>
            └完了画面
            </br>
            送信完了しました。
        <?php endif ?>
    </form> <!--追加-->
</body>
</html>

おわりに

<input>タグを使わず、<button tyep="submit" onclick="submit();">でボタンを設置することも可能だなと思いました。(むしろこっちが理想では?)
この場合、現ソースはPOSTした値の有無でフラグ切替えをしているため、ボタンが押されたかの判定処理も変更が必要になりますね。
これはまた今度、考えてみます。。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?