【初心者向け】formからURLパラメータを渡し、JavaScriptで取得・活用するテクニック

2020.11.19

Webサイト制作において、「前のページで選んだ項目によって、次のページの表示内容を変えたい」といった場面はありませんか？

例えば、検索条件やフォームの入力内容を引き継いで、遷移先のページで特定の処理を行いたいケースです。この記事では、HTMLの<form>タグを使ってURLパラメータを渡し、遷移先のページでJavaScriptを使ってその値を取得・活用する方法を分かりやすく解説します。

1. 遷移前：formタグでURLパラメータを送信する

まず、遷移前のページでHTMLの<form>タグを使います。フォームのmethod属性を「get」に設定するのがポイントです。

method="get"にすると、フォーム内の各要素（<input>や<select>など）のname属性とvalue属性（またはユーザーが入力した値）がペアになり、URLの後ろに「?キー=値&キー=値」という形式（クエリ文字列）で引き継がれます。

例えば、以下のようなフォームを送信すると、遷移先のURLは次のようになります。

▼送信後のURL（例）
http://example.com/?area=エリア1&check=チェック1&select=セレクト2&text=テキスト１&textarea=入力内容

▼HTMLコード例（抜粋）
ポイントは各要素のname属性とvalue属性です。

<!-- action属性に遷移先のURL、method属性に"get"を指定 -->
<form action="/" method="get">

  <!-- ラジオボタン：選ばれたもののvalueが "area" というnameで送られる -->
  <input type="radio" name="area" value="エリア1" checked> エリア1
  <input type="radio" name="area" value="エリア2"> エリア2
  <br>

  <!-- チェックボックス：チェックされたもののvalueが "check" というnameで送られる -->
  <input type="checkbox" name="check" value="チェック1" checked> チェック1
  <input type="checkbox" name="check" value="チェック2"> チェック2
  <br>

  <!-- セレクトボックス：選ばれたoptionのvalueが "select" というnameで送られる -->
  <select name="select"> 
    <option value="セレクト1">セレクト1</option> 
    <option value="セレクト2">セレクト2</option>
  </select>
  <br>

  <!-- テキスト入力：入力された内容が "text" というnameで送られる -->
  <input type="text" name="text" value="テキスト１">
  <br>

  <!-- テキストエリア：入力された内容が "textarea" というnameで送られる -->
  <textarea name="textarea"></textarea>
  <br>

  <input type="submit" value="送信する">
</form>

2. 遷移先：JavaScriptでURLパラメータを取得する

次に、遷移先のページでJavaScriptを使い、URLに含まれたパラメータを取得します。

URL全体のパラメータ文字列（?以降の部分）は、JavaScriptのlocation.searchで取得できます。

// URLが「http://example.com/?area=エリア1&check=チェック1」の場合
var param = location.search;
console.log(param); // 結果："?area=エリア1&check=チェック1"

ただし、これだと文字列全体が取得されるため、特定のキー（例：「area」）の値だけを抜き出すのは少し手間がかかります。そこで、特定のキーの値を簡単に取得できる便利な関数を利用しましょう。

▼特定のURLパラメータを取得する関数（コピペOK）

function getParam(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\




amp;");

var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),

results = regex.exec(url);

if (!results) return null;

if (!results[2]) return '';

return decodeURIComponent(results[2].replace(/\+/g, " "));

}

この関数を使えば、引数に指定したキーの値（この例では「area」）を簡単に取得できます。取得した値を使って、条件分岐（if文）で処理を分けます。


▼活用例：取得した値で処理を分岐する

※この例ではjQueryを使用しています（$("")の部分）


// "area" というキーの値を取得
var area = getParam("area"); 

// もし area の値が "北海道" だったら
if (area == "北海道") {
  // classが "xxxx" の要素に "hokkaido" というclassを付与する
  $(".xxxx").addClass("hokkaido");

// もし area の値が "沖縄" だったら
} else if (area == "沖縄") {
  // 別の処理
  $(".xxxx").addClass("okinawa");

// それ以外だったら
} else {
  // その他の処理
}


参考情報


本記事で紹介したJavaScriptの関数は、以下のWebサイトを参考にさせていただきました。

（参考：URLパラメータ（クエリ文字列）を取得する | W3G）




よくある質問（FAQ）


Q1. method="post" と method="get" の違いは何ですか？


A1. method="get" は、フォームのデータをURLの末尾（URLパラメータ）に追加して送信します。URLを見れば送信内容が分かるため、検索クエリやページ指定など、ブックマーク可能なページに適しています。一方、method="post" はデータをURLには表示せず、HTTPリクエストの本体（ボディ）に入れて送信します。パスワードや個人情報など、URLに残したくないデータを送る場合に使用します。


Q2. JavaScriptを使わずに、URLパラメータを扱う方法はありますか？


A2. はい、あります。例えば、PHPやRuby、Pythonといったサーバーサイドのプログラミング言語を使っている場合、それらの言語でURLパラメータを受け取り、サーバー側でHTMLを生成する前に処理を分岐させることが一般的です。例えばPHPでは$_GET['area']のようにして値を取得できます。


Q3. もっと簡単にURLパラメータを取得できる方法はありますか？


A3. はい、最近のブラウザ（IEを除く）では、URLSearchParamsという便利な機能が標準で搭載されています。これを使うと、より直感的にパラメータを取得できます。以下がその一例です。


// 現在のURLのパラメータを取得
const params = new URLSearchParams(window.location.search);

// "area" というキーの値を取得
const area = params.get("area");

console.log(area); // "area" の値が出力される

				

			

			

				
関連する投稿

							

			

				BACK TO LIST
			

		

		
	




	

		

			
CONTACT

			
webサイト制作、デザインに関するご相談、御見積のご依頼など、弊社へのお問い合わせはこちら

			

				お問い合わせ