PHP+CodeIgniter3+Bootstrap4:チェックボックスとラジオボタンとスライドバー(レンジ入力)を使う
CodeIgniter3+Bootstrap4でForm入力を前回に引き続きやります。
今回は、前回の画面に以下を追加します。
入力画面のイメージはこんな感じになります。
赤枠部分が今回追加する部分です。
実行するボタンを押した後の表示画面はこうです。
こちらも赤枠部分が追加したものです。
ラジオボタンで選択された値を受け取る
全体のソースは最後に掲載するとして、とりあえず、該当する箇所のみ。
まずはラジオボタンです。
入力画面のViewに以下のように追加します。
<fieldset class="form-group"> <div class="row"> <legend class="col-form-label col-sm-2 pt-0"><?php echo $radio_title; ?></legend> <div class="col-sm-10"> <div class="form-check"> <input type="radio" name="radio_btn" id="radio01" value="1番目の選択肢" checked> <label class="form-check-label" for="radio01"> <?php echo $radio01; ?> </label> </div> <div class="form-check"> <input type="radio" name="radio_btn" id="radio02" value="2番目の選択肢"> <label class="form-check-label" for="radio02"> <?php echo $radio02; ?> </label> </div> <div class="form-check"> <input type="radio" name="radio_btn" id="radio03" value="3番目の選択肢"> <label class="form-check-label" for="radio03"> <?php echo $radio03; ?> </label> </div> </div> </div> </fieldset>
ポイントはinputタグの「name」です。
name=で指定した名前で、CodeIgniterのコントローラクラスと連携します。
ラジオボタンの場合は、すべての選択肢で同じ名前(例では、radio_btn)になります。
そして、それぞれのValueに設定した値が、選択情報として渡されます。
対応するコントローラクラスではこんな感じです。
$data['radio_title'] = "ラジオボタンのサンプル"; $data['radio01'] = "ラジオボタン選択肢01"; $data['radio02'] = "ラジオボタン選択肢02"; $data['radio03'] = "ラジオボタン選択肢03"; $data['radio_selected'] = $this->input->post('radio_btn');
上の4行は、表示用の名称をセットする処理。
最後の1行が、選択された値を受け取る処理になります。
そして、受け取った値は表示画面で以下のように表示します。
<div class="row"> <div class="col text-center my-2"> <h2>選択されたラジオボタンの値は「<?php echo $radio_selected; ?>」です。</h2> </div> </div>
$radio_selectedには、選択された[Valueの値」がはいってます。
チェックボックスが選択されているか否かを受け取る
入力画面のVIEWのチェックボックスを表示する箇所です。
<div class="form-group row"> <div class="col-sm-2"><?php echo $check_title; ?></div> <div class="col-sm-10"> <div class="form-check"> <input class="form-check-input" type="checkbox" name="check01" value="1" id="check01"> <label class="form-check-label" for="check01"> <?php echo $check01; ?> </label> </div> </div> </div>
ここもname=で連携する名前を追加するのがポイントです。
$data['check_title'] = "チェックボックスのサンプル"; $data['check01'] = "チェックボックス選択肢01"; if($this->input->post('check01')){ $data['check_selected'] = "チェックされています"; }else{ $data['check_selected'] = "チェックされていません"; }
上の2行が、入力画面に表示する名称などです。
ポイントはその下の部分。
チェックボックスの値を受け取ってますが、チェックされていると値がはいり、されていないと何もはいらない・・ということで、IF文で判定できるみたいです。
IF文の結果がTRUEなら、チェックされた場合の処理、そうでない場合はチェックされていない場合の処理・・のように切り分けます。
ということなので、結果表示部分はこうなります。
<div class="row"> <div class="col text-center my-2"> <h2>チェックボックスは<?php echo $check_selected; ?>。 </h2> </div> </div>
ここは特に補足もありません。
スライダー(レンジ入力)です。
Viewでスライダー(レンジ入力)を表示する部分です。
<div class="form-group row my-4"> <div class="col-sm-2"> <label for="range01">レンジの実例</label> </div> <div class="col-sm-10"> <input type="range" class="custom-range" min="0" max="100" name="range01" id="range01"> </div> </div>
これも、CodeIgniterとやり取りするために「name=」で名前を設定します。
minとmaxは、デフォルトが「0」と「100」なので、あえて書かなくてもいいんですが、わかりやすさ優先で書いてます。
コントローラでは、値の受取のみになります。
$data['radio_selected'] = $this->input->post('radio_btn');
ここで受け取った値には、レンジ入力で指定された値(数字)がはいってきます。
例によって、表示する部分はこんな感じです。
<div class="row"> <div class="col text-center my-2"> <h2>スライドバーで選ばれた割合は「<?php echo $range_value; ?>」です。 </h2> </div> </div>
特にポイントはありません。
注意点と全体ソース
上記で1点だけ。
inputタグに「name」で名前をつけるとき、例えば「check-title」みたいに「-」でつながないように気をつけた方がいいです。
なんか、わけのわからないエラーがでました。
必ず「check_title」のようにアンダーバーに統一した方が安全です。
では、全文です。
<?php defined('BASEPATH') OR exit('No direct script access allowed'); class Demos extends CI_Controller{ public function __construct() { parent::__construct(); $this->load->helper('url'); $this->load->helper('html'); $this->load->model('Demo_model'); } public function tbl($page = 'demobody') { if ( ! file_exists(APPPATH.'views/demos/'.$page.'.php')) { show_404(); } $data['title'] = ucfirst($page); $data['infotitle'] = "サンプルの一覧表です"; $data['info'] = $this->Demo_model->getTableData(); $this->load->view('templates/header', $data); $this->load->view('demos/'.$page, $data); $this->load->view('templates/footer', $data); } public function inp() { $this->load->helper('form'); $this->load->library('form_validation'); $this->form_validation->set_rules('input-id', 'input-id', 'required'); $this->form_validation->set_rules('input-password', 'input-password', 'required'); $data['title'] = "formサンプル"; $data['radio_title'] = "ラジオボタンのサンプル"; $data['radio01'] = "ラジオボタン選択肢01"; $data['radio02'] = "ラジオボタン選択肢02"; $data['radio03'] = "ラジオボタン選択肢03"; $data['check_title'] = "チェックボックスのサンプル"; $data['check01'] = "チェックボックス選択肢01"; $data['id'] = $this->input->post('input-id'); $data['pass'] = $this->input->post('input-password'); $data['radio_selected'] = $this->input->post('radio_btn'); if($this->input->post('check01')){ $data['check_selected'] = "チェックされています"; }else{ $data['check_selected'] = "チェックされていません"; } $data['range_value'] = $this->input->post('range01'); if ($this->form_validation->run() === FALSE){ if ( ! file_exists(APPPATH.'views/demos/inpbody.php')){ show_404(); } $data['msg'] = "とりあえずIDとパスワードを入力するサンプル"; $this->load->view('templates/header', $data); $this->load->view('demos/inpbody.php',$data); $this->load->view('templates/footer', $data); }else{ if ( ! file_exists(APPPATH.'views/demos/success_body.php')){ show_404(); } $data['msg'] = "入力を正常に受け取りました"; $this->load->view('templates/header', $data); $this->load->view('demos/success_body.php',$data); $this->load->view('templates/footer', $data); } } } ?>
次は入力画面(inpbody.php)です
<div class="row"> <div class="col text-center"> <h2><?php echo $msg; ?></h2> </div> </div> <div class="row"> <div class="col text-center text-danger"> <h2><?php echo validation_errors(); ?></h2> </div> </div> <?php echo form_open('Demos/inp'); ?> <div class="form-group row my-4"> <label for="inputId" class="col-sm-2 col-form-label">ユーザID</label> <div class="col-sm-10"> <input type="text" class="form-control" id="input-id" name="input-id" placeholder="ユーザID(半角)を入力"> </div> </div> <div class="form-group row my-4"> <label for="inputPassword" class="col-sm-2 col-form-label">パスワード</label> <div class="col-sm-10"> <input type="password" class="form-control" id="input-password" name="input-password" placeholder="パスワード"> <small id="passwordHelpBlock" class="form-text text-muted">パスワードは、文字と数字で8~20文字です。空白、記号、特殊文字、絵文字を含むことはできません。</small> </div> </div> <fieldset class="form-group"> <div class="row"> <legend class="col-form-label col-sm-2 pt-0"><?php echo $radio_title; ?></legend> <div class="col-sm-10"> <div class="form-check"> <input type="radio" name="radio_btn" id="radio01" value="1番目の選択肢" checked> <label class="form-check-label" for="radio01"> <?php echo $radio01; ?> </label> </div> <div class="form-check"> <input type="radio" name="radio_btn" id="radio02" value="2番目の選択肢"> <label class="form-check-label" for="radio02"> <?php echo $radio02; ?> </label> </div> <div class="form-check"> <input type="radio" name="radio_btn" id="radio03" value="3番目の選択肢"> <label class="form-check-label" for="radio03"> <?php echo $radio03; ?> </label> </div> </div> </div> </fieldset> <div class="form-group row"> <div class="col-sm-2"><?php echo $check_title; ?></div> <div class="col-sm-10"> <div class="form-check"> <input class="form-check-input" type="checkbox" name="check01" value="1" id="check01"> <label class="form-check-label" for="check01"> <?php echo $check01; ?> </label> </div> </div> </div> <div class="form-group row my-4"> <div class="col-sm-2"> <label for="range01">レンジの実例</label> </div> <div class="col-sm-10"> <input type="range" class="custom-range" min="0" max="100" name="range01" id="range01"> </div> </div> <div class="form-group row my-4"> <div class="offset-sm-2 col-sm-10"> <button type="submit" class="btn btn-primary">実行する</button> </div> </div> </form>
最後に結果表示画面(successbody.php)です。
<div class="row"> <div class="col text-center my-4"> <h2><?php echo $msg; ?></h2> </div> </div> <div class="row"> <div class="col text-center my-2"> <h2>入力されたIDは「<?php echo $id; ?>」です。 </h2> </div> </div> <div class="row"> <div class="col text-center my-2"> <h2>入力されたパスワードは「<?php echo $pass; ?>」です。 </h2> </div> </div> <div class="row"> <div class="col text-center my-2"> <h2>選択されたラジオボタンの値は「<?php echo $radio_selected; ?>」です。</h2> </div> </div> <div class="row"> <div class="col text-center my-2"> <h2>チェックボックスは<?php echo $check_selected; ?>。 </h2> </div> </div> <div class="row"> <div class="col text-center my-2"> <h2>スライドバーで選ばれた割合は「<?php echo $range_value; ?>」です。 </h2> </div> </div> <div class="row"> <div class="col my-2 text-center"> <?php echo img('images/sample02.jpg'); ?> </div> </div>
ヘダーとフッターの部分は以下の記事で書いたテンプレートの使いまわしです。
ではでは。