[JavaScript] フォームの入力項目（textare/inputタグ）の初期値をGETパラメーターの値で設定したい

公開日:2024/03/27

フォームの入力項目に、前のページで選択した値などを引き継いで初期値として表示したいといったケースがあります。
本記事では、textareやinputなどのフォームの入力項目に、GETパラメーターで渡された値を初期値として設定する方法をご紹介します。

サンプルコード

HTML

<textarea name="xxx" data-default-get="sample1"></textarea>

<input type="text" name="xxx" data-default-get="sample2">

inputやtextareaなどの入力項目のタグに「data-default-get」というデータ属性を設定します。
値には、その項目の初期値として使用したいGETパラメーターの名前を指定します。

JavaScript

document.addEventListener('DOMContentLoaded', function() {
    const params = new URL(window.location.href).searchParams;
    const tags = document.querySelectorAll('[data-default-get]');
    
    tags.forEach(function(tag) {
        const key = tag.getAttribute('data-default-get');
        const value = params.get(key);
        
        if(value !== null) {
            tag.value = value;
        }
    });
}, false);

GETパラメーターの内容を取得し、各要素に設定された「data-default-get」の値と照合して初期値を設定します。

動作確認

URLにパラメータをつけてページを開き、入力項目の初期値が設定されているか確認してみましょう。

?sample1=サンプル1&sample2=サンプル2

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。