CodeIgniter3+Bootstrap4でForm入力を前回に引き続きやります。
今回は、前回の画面に以下を追加します。
- SELECTからひとつだけ選択値を受け取る
- SELECTで複数選択された値を受け取る
- ファイル選択ダイアログ表示と選択したファイル名を受け取る
表示画面のイメージ
入力画面のイメージはこんな感じになります。
今回追加した部分だけ表示してます。
そして、選択された結果の表示はこんな感じです。
VIEWの表示部分です
今回はコントローラクラスから初期表示時に値を渡さないので、VIEWのPHPソースだけです。
フォームの選択
以下のように書きます。
例によって、コントローラクラスで値を受け取る変数名を「name=」で指定します。
<div class="form-group"> <label for="File">ファイル入力の例</label> <input type="file" name="file01" class="form-control-file" id="File"> </div>
こう書くと、以下のように表示されます。
ここで「ファイルを選択」ボタンを押すと、ファイル選択ダイアログが表示されます。
ここで選んだファイル名をコントローラで取得できるわけです。
ひとつだけ選択するSELECT
デザインは2種類あります。
パターン1とパターン2として例を書きます。
<div class="form-group"> <label for="exampleFormControlSelect1">SELECTタイプ1</label> <select name="select01" class="custom-select" id="exampleFormControlSelect1"> <option selected>この選択メニューを開く</option> <option value="1">選択メニュー:その1</option> <option value="2">選択メニュー:その2</option> <option value="3">選択メニュー:その3</option> </select> </div> <div class="form-group"> <label for="exampleFormControlSelect2">SELECTタイプ2</label> <select name="select02" class="form-control" id="exampleFormControlSelect2"> <option selected>この選択メニューを開く</option> <option>単一選択:1番目</option> <option>単一選択:2番目</option> <option>単一選択:3番目</option> <option>単一選択:4番目</option> <option>単一選択:5番目</option> </select> </div>
例によって、コントローラで値の受取に使う名称を「name=」で追加してます。
表示すると、こんな感じ。
タイプ1とタイプ2の見た目の違いは微妙ですけどね。
同じ、Selectですが指定するclassの名前を変えるだけです。
タイプ1は「class="custom-select"」。
タイプ2は「class="form-control"」。
あとは、ほぼ同じですね。
複数項目選択可能なSELECT
上と同じく「SELECT」を使います。
<div class="form-group"> <label for="exampleFormControlSelect2">Ctrlキーで複数選択できます</label> <select multiple name="select03[]" class="form-control" id="exampleFormControlSelect2"> <option>--未選択--</option> <option>複数:1番目</option> <option>複数:2番目</option> <option>複数:3番目</option> <option>複数:4番目</option> <option>複数:5番目</option> </select> </div>
ポイントは3つあります。
- multiple を指定します。
- classは「 class="form-control"」です。
- コントローラクラスで値を受け取るために「name=」を追加するのですが、複数選択可能にするために配列にしておく必要があります。
この部分です。
name="select03[]"
特に大事なところです。
もし、「name="select03"」のようにすると、複数選択しても最後に選択された一つしかコントローラクラスでは受け取れなくなりますので・・・。
これで表示するとこんな感じです。
Ctrlキーを押しながらクリックすると複数選択できます。
コントローラクラスでの値の受取
上記で選択されたファイル名な選択項目の値を受け取るのは、他のFormと同じく、name=で指定した名称を使って以下のように書きます。
$data['file01'] = $this->input->post('file01');
$data['select01'] = $this->input->post('select01');
$data['select02'] = $this->input->post('select02');
$data['select03'] = $this->input->post('select03');
注意するのは複数項目選択可能なSELECTの場合です。
複数項目を受け取る必要があるので、配列を明示的に指定していますが、コントローラクラスで値を受け取る時は「$this->input->post('select03');」のように書きます。
「$this->input->post('select03[]');
ではないので、忘れないようにしないと・・です。
取得結果表示画面のVIEW
PHPの該当箇所です。
<div class="row"> <div class="col text-center my-2"> <h2>ファイル選択された値は「<?php echo $file01; ?>」です。 </h2> </div> </div> <div class="row"> <div class="col text-center my-2"> <h2>カスタム選択で選ばれた値は「<?php echo $select01; ?>」です。 </h2> </div> </div> <div class="row"> <div class="col text-center my-2"> <h2>単一選択で選ばれた値は「<?php echo $select02; ?>」です。 </h2> </div> </div> <div class="row"> <div class="col text-center my-2"> <?php foreach($select03 as $val){ print("<h2>複数選択で選ばれた値は「".$val ."」です。 </h2>"); } ?> </div> </div>
SELECTの複数項目選択以外は、コントローラクラスの$data['xxxx']で指定した名前に$をつけて「$xxxx」のように呼び出しているだけです。
ただ、SELECTの複数項目選択では「配列(array)」ですから、foreachでうけて全ての選択項目を拾う必要があります。
最後にソースの全体です
まず、入力画面のVIEWにあたる「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"> <label for="File">ファイル入力の例</label> <input type="file" name="file01" class="form-control-file" id="File"> </div> <div class="form-group"> <label for="exampleFormControlSelect1">SELECTタイプ1</label> <select name="select01" class="custom-select" id="exampleFormControlSelect1"> <option selected>この選択メニューを開く</option> <option value="1">選択メニュー:その1</option> <option value="2">選択メニュー:その2</option> <option value="3">選択メニュー:その3</option> </select> </div> <div class="form-group"> <label for="exampleFormControlSelect2">SELECTタイプ2</label> <select name="select02" class="form-control" id="exampleFormControlSelect2"> <option selected>この選択メニューを開く</option> <option>単一選択:1番目</option> <option>単一選択:2番目</option> <option>単一選択:3番目</option> <option>単一選択:4番目</option> <option>単一選択:5番目</option> </select> </div> <div class="form-group"> <label for="exampleFormControlSelect2">Ctrlキーで複数選択できます</label> <select multiple name="select03[]" class="form-control" id="exampleFormControlSelect2"> <option>--未選択--</option> <option>複数:1番目</option> <option>複数:2番目</option> <option>複数:3番目</option> <option>複数:4番目</option> <option>複数:5番目</option> </select> </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>
VIEWの表示とSUBMIT後の入力値を受け取るコントロールクラス「Demos.php」です
<?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'); } public function inp() { $this->load->helper('form'); $data['title'] = "formサンプル"; $data['file01'] = $this->input->post('file01'); $data['select01'] = $this->input->post('select01'); $data['select02'] = $this->input->post('select02'); $data['select03'] = $this->input->post('select03'); 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); } } } ?>
入力してSubmitした結果を表示する「successbody.php」です。
<div class="row"> <div class="col text-center my-2"> <h2>ファイル選択された値は「<?php echo $file01; ?>」です。 </h2> </div> </div> <div class="row"> <div class="col text-center my-2"> <h2>カスタム選択で選ばれた値は「<?php echo $select01; ?>」です。 </h2> </div> </div> <div class="row"> <div class="col text-center my-2"> <h2>単一選択で選ばれた値は「<?php echo $select02; ?>」です。 </h2> </div> </div> <div class="row"> <div class="col text-center my-2"> <?php foreach($select03 as $val){ print("<h2>複数選択で選ばれた値は「".$val ."」です。 </h2>"); } ?> </div> </div>
なお、例によって、ヘダーとフッターの部分は以下の記事で書いたテンプレートの使いまわしです。
ではでは。