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

我正在寻找一种简单的方法，当用户点击其他页面中给出的链接时，在我的联系人表单中预先填充一个字段

这是我的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>

您的姓名：


您的电子邮件：


您的留言：

---

我想在用户单击url（如www.xyz.com/contact.html）时用“some text”填充“message”字段。setmessagefield=some_text

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]);;
}

var hashParams=window.location.hash.substr（1.split（'&'）；//取下接头的substr（1）`#`
for（var i=0；i

它的最大优点是它的灵活性。如果要设置两个字段的值，请在哈希中提供这两个字段的“

id

”：

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

4个字段？4身份证：

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

---

无需编辑代码。

您可以使用

window.location.href

检索当前url，然后通过正则表达式获取默认消息：

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

---

更现代的方法是使用和。让浏览器引擎来完成这项工作

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

或堆栈溢出：

const hash='？name=some_text&email=more%20text'；
常量示例=”http://example.com/“+散列；
（新URL（示例））.searchParams.forEach（（x，y）=>
document.getElementById（y）.value=x）
您的姓名：


您的电子邮件：

如果您使用的是PHP，就不用担心JavaScript了

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

<form method="post" action="submit.php" >
  <p>Your name:<br />
  <input name="name" value="<?php echo htmlspecialchars($_GET['name']) ?>" /></p>

  <p>Your email:<br />
  <input name="email" value="<?php echo htmlspecialchars($_GET['email']) ?>"/></p>

  <p>Your message:<br />
  <textarea name="message" id="message" rows="10" cols="50">
    <?php echo htmlspecialchars($_GET['message']) ?>
  </textarea></p>

  <p><input type="submit" value="Send" /></p>
</form>


您的姓名：

你试过看看这些变量中有什么：
console.log（window.location.href）
应该给你
www.xyz.com/contact.html？setmessagefield=some_text
和
console.log（msg）
应该给你数组：
[“？setmessagefield=some_text”，“some_text”]
。如果我有这样一个url怎么办？散列符号插入到参数的末尾。在执行之前，可能需要考虑安全问题：我知道这有点老了，但是当我使用这个或ALIDSIG的答案时，如果我改变了任何字段（自动填充或不填写），所有自动完成的字段都会被清除。但是，浏览器自动完成或手动输入信息时不会发生这种情况。当您使用此答案时，是否会在加载页面时输入数据？如果在此之后数据消失，则可能是浏览器自动完成清除字段。输入数据时，只要我在预填充或空f中键入一个字符字段已清除且不会返回。没有chrome auto complete尝试填写表单的迹象。当auto complete填写字段时，字段通常会高亮显示。另外，我正在键入的框中会显示一个下拉列表。我正在使用用户脚本将此功能添加到第三方页面。此答案和URL（）也会发生同样的情况下面是构造函数的答案。如果有人想对多个字段执行此操作（HTML规则不允许使用相同的ID），请尝试
document.getElementsByName（y）.forEach（（p）=>（p.value=x））；
@Rishav谢谢。在您的情况下，您可以编写
document.getElementsByName（y）.forEach（p=>p.value=x）；