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参数（因为这些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]);;
}

<强> Working example

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

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

4个字段？ 4 id's：

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

无需编辑代码。

Answer 2

更现代的方法是使用URL() constructor和searchParams property。让浏览器引擎完成工作！

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

Try it online!

Answer 3

您可以使用window.location.href检索当前网址，然后通过正则表达式获取默认消息：

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

Answer 4

如果您使用的是PHP，请不要理会JavaScript。

只需在HTML中添加一些内容：

SELECT CASE WHEN TT.Value <> 'A' THEN Value END Id,
       T.Name
FROM
(
  VALUES
  (10, 'Mike'),
  (NULL, 'Jane')
) T(Id, Name) CROSS APPLY(VALUES (CONCAT('A', Id))) TT(Value);

通过html中的URL预填表单字段

4 个答案: