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?

More than 3 years have passed since last update.

【PHP】要件および画像を参考に注文フォームおよび注文確認画面を作成せよ

Last updated at Posted at 2021-05-27
・注文フォームの要件

ファイル名(フォーム): htdocs/14/order_form.php ファイル名(確認画面): htdocs/14/order_confirm.php

1・注文者名、注文者住所、注文者電話番号の入力欄をtype="text"で配置
2・注文する商品のラジオボタンを配置
3・「紙の領収書を希望する」チェックボックスを配置
4・「注文内容を送信」と書かれたsubmitボタンを配置

image.png

order_form.php


<!DOCTYPE html>
<html lang="ja">
<head>
  <title>order_form</title>
  <style>
label {
	display:block;
}
  </style>
      <script src="jquery-3.6.0.min.js"></script>
    <script>
        var nowVal;
        function fnc(obj){
          if(nowVal == obj.value){
            obj.checked = false;
            nowVal = "";
          }else{
            nowVal = obj.value;
          }
        }
    </script>
</head>
<body>
  <h1>注文フォーム</h1>
  <form action="order_confirm.php"  method="get">
      <label>注文者名: <input type="text" name="radio1"></label>
      <label>注文者住所: <input type="text" name="radio2"></label>
      <label>注文者電話番号: <input type="text" name="radio3"></label>


  <h2>購入を希望する商品</h2>

      <label>単品: <input type="radio" name="radio4" value="単品"></label>
      <label>3個入り: <input type="radio" name="radio4" value="3個入り"></label>
      <label>10個入り: <input type="radio" name="radio4" value="10個入り"></label>

  
  <h2><label>紙の領収書を希望する:
       <input type="radio" name="radio"  onclick="fnc(this);"></label></h2>
      <input type="submit"  value="注文内容を送信">
  </form>
</body>
</html>

order_confirm.php


<?php
  $errors = [];



  if($_GET['radio1'] !== "") {
    $radio1 = $_GET['radio1'];
  }else{
    echo $_GET['radio1'];
    $radio1 = "";
    $errors[]  = '注文者名を入力してください';
  }



  if($_GET['radio2'] !== "") {
    $radio2 = $_GET['radio2'];
  }else{
    $radio2 = "";
    $errors[]  = '注文者住所を入力してください';
  }



  if($_GET['radio3'] !== "") {
    $radio3 = $_GET['radio3'];
  }else{
    $radio3 = "";
    $errors[]  = '注文者電話番号を入力してください';
  }



  if(isset($_GET['radio4']) === true){
    $radio4 = $_GET['radio4'];

  }else{
    $radio4 = "";
    $errors[]  = '商品名を選択しください';
  }
  
  if(isset($_GET['radio']) === true){
    $radio = "領収書:要";
  }else{
    $radio = "領収書不要";
  }


?>

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>order_confirm</title>
  <style>
a {
	text-decoration: none;
  color: black;
}
button {
  display:block;
  margin-bottom: 10px;
}
.error {
color: red;
}


.error1 {
font-weight: bold;
}

  </style>
</head>
<body>
  <!-- エラーがあれば表示 -->

  <h1>注文確認画面</h1>
<?php 

    foreach($errors as $error){ ?>
    <p class="error" >  <?php echo $error;  ?>   <p> 
    <?php     } 
  ?>
  <dl>
      <dt>注文者名</dt>
      <dd><?=$radio1?></dd>

      <dt>注文者住所</dt>
      <dd><?=$radio2?></dd>

      <dt>注文者電話番号</dt>
      <dd><?=$radio3?></dd>

      <dt>商品名</dt>
      <dd><?=$radio4?></dd>

      <dt>領収書</dt>
      <dd class="error1"  ><?= $radio?></dd>
    </dl>
    <button type="button"><a href="order_form.php">注文を確定</a></button>
    <!-- <button type="button"><a href="order_form.php">戻る</a></button> -->
    <button onclick="location.href='./order_form.php'">戻る</button>
</html>
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?