1
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 5 years have passed since last update.

【JavaScript】選択項目によって入力させたい項目を切り替えるjs(要jQuery)

Last updated at Posted at 2017-09-16

フォームとかでよくある
選択項目によって入力させたい項目を切り替える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依存はいずれやめないとですねぇ

1
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
1
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?