htmlのURLを介した事前入力フォームフィールド

Question

ユーザーが他のページで指定されたリンクをクリックすると、連絡先フォームのフィールドを事前入力する簡単な方法を探しています。

これは、HTMLで私のコンタクトフォームです：

<form method="post" action="submit.php" > 
    <p>Your name: 
    <br /><input name="name" /></p> 
    <p>Your email: 
    <br /><input name="email" /></p> 
    <p>Your message: 
    <br /><textarea name="message" id="message" rows="10" cols="50"></textarea></p> 
    <p><input type="submit" value="Send" /></p> 
</form> 

私は、ユーザーがJavaScriptが無い築いてきましたwww.xyz.com/contact.html?setmessagefield=some_text

Answer 1

のようなURLをクリックし、「テキスト」と「メッセージ」フィールドを埋めたいです-inはそのようなURLパラメータを解析します（これらのGETパラメータは通常、サーバにデータを送信するために使用されるため）。
私は（ハッシュは純粋にクライアント側である）の代わりにハッシュを使用することをお勧めしたい：

www.xyz.com/contact.html#name=some_text &メール=より％20text

今

、あなたのフィールドにいくつかのid年代を追加します。

<p>Your name: 
<br /><input name="name" id="name" /></p> 

<p>Your email: 
<br /><input name="email" id="email" /></p> 

は次に、このような値を設定し、負荷に：

var hashParams = window.location.hash.substr(1).split('&'); // substr(1) to remove the `#` 
for(var i = 0; i < hashParams.length; i++){ 
    var p = hashParams[i].split('='); 
    document.getElementById(p[0]).value = decodeURIComponent(p[1]);; 
} 

Working example

本の大きな利点は、それが柔軟であるということです。あなたは2つのフィールドの値を設定したい場合は、ハッシュでこれらの2つのフィールドid年代を供給：

www.xyz.com/contact.html#name=some_text &メール=より多​​くの％を20text

4フィールド？ 4つのID年代：

www.xyz.com/contact.html#name=some_text &メール=より％20text &ユーザ名=ジョン&年齢、次に= 23

コードを編集する必要はありません、 。

Answer 2

あなたはwindow.location.hrefを使用して、現在のURLを取得し、正規表現を経由して、デフォルトのメッセージを取得することができます。

var msg = window.location.href.match(/\?setmessagefield=(.*)/); 
document.getElementById("message").value = msg[1]; 

Answer 3

より近代的な方法はURL() constructorとsearchParams property用いることであろう。ブラウザエンジンで作業をさせてください！

(new URL(window.location.href)).searchParams.forEach((x, y) => 
    document.getElementById(y).value = x) 

Try it online!