LoginSignup
37
34

More than 5 years have passed since last update.

LaravelでFromに遷移してきた時のRadioのデフォルト値の設定とSubmitで弾かれた時のRadioの値の維持

Last updated at Posted at 2017-10-26

前提

好きな食べものとして、AppleかBananaかを選ぶラジオボックスがあるとする。
「Banana」を選択してた状態でsubmitしたが、他の必須項目で未入力があり登録が完了せず戻ってきた際に「Banana」の選択状態が解除されていたので維持したい。
ついでに、このFormにきた際はデフォルトでAppleを選択状態にしておきたい。

使う関数

old()

old()に関して

Laravel also provides a global old helper. If you are displaying old input within a Blade template, it is more convenient to use the old helper. If no old input exists for the given field, null will be returned:

<input type="text" name="username" value="{{ old('username') }}">

参考URL
Accessing The Request

普通にold()を書くだけだと

<input type="radio" name="like" id="apple" value='apple' {{ old('like') == 'apple' ? 'checked' : '' }}>
<label for="apple">Apple</label>

<input type="radio" name="like" id="banana" value='banana' {{ old('like') == 'banana' ? 'checked' : ''}}>
<label for="banana">Banana</label>

見たら分かるかもしれないが

{{ old('like') == 'apple' ? 'checked' : '' }}

formをsubmitしてValidateでの戻ってきた際にセッションのフラッシュデータと比較して同じであればchecked状態にするのだが

これだけだとFormページに遷移された時にどちらも選択されていない状態である

jsでcheckedにすることも可能だがlaravelだけで済ませたい場合はold()に第2引数としてデフォルト値を指定することで解決する

You may pass a default value as the second argument to the input method. This value will be returned if the requested input value is not present on the request:

$name = $request->input('name', 'Sally');

参考URL
Accessing The Request

デフォルトでAppleを選択状態にさせておく

<input type="radio" name="like" id="apple" value='apple' {{ old('like','apple') == 'apple' ? 'checked' : '' }}>
<label for="apple">Apple</label>

old('like','apple') == 'apple'でデフォルトをinput valueと同じ値にしておけばよい

Checkboxの場合

radioボタンの場合、何かしらの値が戻ってきますが(radioの時の例を使うと、AppleかBananaのどちらかがold('like')でとれる。つまり、例外を除いて何かしらのradio項目を選択した状態でsubmitすると仮定する)

Checkboxの場合チェックを入れなかった場合old('要素class名')で取得するとnullが返ってきます。

ですので単純に

<input type="checkbox" name="apple" {{ old('apple') ? 'checked' : '' }}>

でnullでなければ選択状態にする。ことはできるのですが、
問題になってくるのはデフォルトで選択状態にしたい場合です。

デフォルトで選択状態にしたい場合、
このCheckboxが置いてあるFormに遷移してきたときもold('apple')nullだけどcheckedにしたい、でもバリデーションでnullが戻ってきた時はcheckedを外したい
となり、先程のコードではどちらも満たすことができません。

この問題を解決するには$errors->any()の値を見ると解決することができます。

$errors->any()は、バリデーションで引っかかった際にtrueを返します。

ですので、今回の場合、

  • old('apple')がtrue(選択されてた場合はtrue)
  • $errors->any()がfalse(Formに遷移してきた際はfalse状態)

どちらかの条件を満たす場合にchecked状態にすればいいので以下のような判定式にすることで解決します

<input type="checkbox" name="apple" {{ old('apple') || !$errors->any() ? 'checked' : '' }}>
37
34
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
37
34