フォームとかでよくある
選択項目によって入力させたい項目を切り替えるjsです。
(改修の余地はありすぎますが、とりあえず動きます。)
以下が
ラジオボタンの会社項目(inputのnameがcompany)で”qiita”を選択された場合は社員番号を入力させる。
また、会社項目を"qiita"以外を選択された場合は会社名を入力させる。
というパターンの場合のjsです
toggle.js
// jQuery読み込んでおく
$(function(){
// 初期表示時、両方の項目を非表示にしておく場合は両方hideを設定
$('.switch-AAA').hide(); // 項目employee_idを内包するclass
$('.switch-BBB').hide(); // 項目company_nameを内包するclass
// companyが選択されていたら&その値が"qiita"だったら
if ($('input[name="company"]:checked').val()
&& $('input[name="company"]:checked').val() === 'qiita') {
// employee_idのdisabledを外して表示させ、
// company_nameをdisabledにして隠す。
$('.switch-AAA').show();
$('.switch-BBB').hide();
$('[name="company_name"]').attr("disabled", true);
$('[name="employee_id"]').attr("disabled", false);
} else if ($('input[name="company"]:checked').val()
&& $('input[name="company"]:checked').val() !== 'qiita') {
// company_nameのdisabledを外して表示させ、
// employee_idをdisabledにして隠す。
$('.switch-AAA').hide();
$('.switch-BBB').show();
$('[name="company_name"]').attr("disabled", false);
$('[name="employee_id"]').attr("disabled", true);
}
// companyがクリックされたら
$('[name="company"]').click(function() {
if ($('input[name="company"]:checked').val()
&& $('input[name="company"]:checked').val() === 'qiita') {
$('.switch-AAA').show();
$('.switch-BBB').hide();
$('[name="company_name"]').attr("disabled", true);
$('[name="employee_id"]').attr("disabled", false);
} else if ($('input[name="company"]:checked').val()
&& $('input[name="company"]:checked').val() !== 'qiita'){
$('.switch-AAA').hide();
$('.switch-BBB').show();
$('[name="company_name"]').attr("disabled", false);
$('[name="employee_id"]').attr("disabled", true);
}
});
});
このjsを実装した場合、POSTされる項目とPOSTされない項目が出てきますので、
そういう場合はPHP側で
array_key_exists
を使って、配列に項目が入っているかをチェックした方がいいです(おそらく)
以下例
received.php
// POSTされた項目の中にemployee_idがあれば値に対してゼロサプレス処理を行う。
if (array_key_exists('employee_id', $attributes) === true) {
$attributes['employee_id'] = ltrim($attributes['employee_id'], '0')
}
jQuery依存はいずれやめないとですねぇ