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

当用户点击类似网址时,我想用"some text"填充"message"字段 www.xyz.com/contact.html?setmessagefield=some_text

Answer 1

JavaScript没有内置函数来解析这样的url参数(因为那些GET参数通常用于向服务器发送数据).
我建议使用哈希(哈希是纯粹的客户端):

www.xyz.com/contact.html#name=some_text&email=more%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]);;
}

工作实例

这样做的最大优点是它具有灵活性.如果要设置2个字段的值,则id在哈希中提供这两个字段:

www.xyz.com/contact.html#name=some_text&email=more%20text

4个领域？4个id:

www.xyz.com/contact.html#name=some_text&email=more%20text&username=john&age=23

然后,无需编辑代码.

Answer 2

更现代的方法是使用URL()构造函数和searchParams属性.让浏览器引擎完成工作吧!

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

在线尝试!