0
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.

任意のボタンからの訪問はお問い合わせフォームのselectboxでその選択肢が選択済のまま表示されるようにする

0
Posted at

やりたいことを日本語で表現するのはムズイデズネ...

やりたいこと

任意のページのボタンからのお問い合わせフォームへの訪問は、あらかじめその項目が選択済となってお問い合わせフォームが表示されるようにしてほしいとの要望があったので初心者ながらも調べてみました。
(これが最適かどうかもわかりませんのでより良い方法があれば教えてください)

流れ

  1. 元のaタグにURLパラメーターを設置しておく
  2. 訪問先であるお問い合わせフォームにて、そのURLパラメーターの取得
  3. もしそのパラメーターのidとselectbox の選択肢(option)のidが一致すればその選択肢が選択済になるようにする

という流れにしようと思いました

1. 元のaタグにURLパラメーターを設置


<a href="hogehoge/contact/?id=lecture">

2. 訪問先であるお問い合わせフォームにて、そのURLパラメーターの取得


// URLのパラメータを取得
var urlParam = location.search.substring(1);
var str = '文字列';
str.substring(開始位置, 終了位置);

で、引数が一つなので、一文字目から最後までを抽出という意味です

▼参考サイト
substringで文字の切り出し

3.もしそのパラメーターのidとselectbox の選択肢(option)のidが一致すればその選択肢が選択済になるようにする

もしそのパラメーターのidとselectbox の選択肢(option)のidが一致すれば

var urlParam = location.search.substring(1);
 
// URLにパラメータが存在する場合
if(urlParam) {
    //処理
}

選択肢が選択済になるようにする


document.getElementById('lecture').selected = true;

ということで1、2、3を合わせると、


var urlParam = location.search.substring(1);
 
// URLにパラメータが存在する場合
if(urlParam) {
  document.getElementById('lecture').selected = true;
}

出来上がりですね

selectboxにidをつけて、
その子要素の何番目option[2]とかで要素を取得してもできまする。

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