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

这样的 url 时，我想用“一些文本”填充“消息”字段

Answer 1

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

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

Try it online!或者在 Stack Overflow 上:

const hash = '?name=some_text&email=more%20text';
const example = "http://example.com/" + hash;

(new URL(example)).searchParams.forEach((x, y) =>
    document.getElementById(y).value = x);

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

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