通過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> 

我想填補「消息」字段「一些文本」時，像www.xyz.com/contact.html?setmessagefield=some_text

Answer 1

JavaScript的URL的用戶點擊沒有內置-in函數來分析url參數（因爲這些GET參數通常用於將數據發送到服務器）。
我建議使用散列代替（A散列純粹是客戶端）：

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您目前的網址，然後通過正則表達式得到默認的消息：

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!