Javascript 通过 html 中的 URL 预填表单字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14070105/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Pre-fill form field via URL in html
提问by Rao
I am looking for a simple way to pre-fill a field in my contact form when ever a user clicks on a link that is given in some other page.
我正在寻找一种简单的方法来在用户单击其他页面中提供的链接时预填充我的联系表单中的字段。
This is my contact form in html :
这是我在 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>
I want to fill the "message" field with "some text" when a user clicks on a url like www.xyz.com/contact.html?setmessagefield=some_text
当用户点击像这样的 url 时，我想用“一些文本”填充“消息”字段 www.xyz.com/contact.html?setmessagefield=some_text
回答by Cerbrus
JavaScript has no built-in functions to parse url parameters like that (Since those GET parameters are usually used to send data to the server).
I'd suggest using a hash instead (A hash is purely client-side):
JavaScript 没有内置函数来解析这样的 url 参数（因为这些 GET 参数通常用于将数据发送到服务器）。
我建议改用散列（散列纯粹是客户端）：
www.xyz.com/contact.html#name=some_text&email=more%20text
www.xyz.com/contact.html#name=some_text&email=more%20text
Now, add some id's to your fields:
现在，将一些id'添加到您的字段中：
<p>Your name:
<br /><input name="name" id="name" /></p>
<p>Your email:
<br /><input name="email" id="email" /></p>
Then set the values like this, on load:
然后在加载时设置这样的值：
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]);;
}
The big advantage of this is that it's flexible. If you want to set the values of 2 fields, you supply those 2 fields' id's in the hash:
这样做的最大优点是它很灵活。如果要设置 2 个字段的值，请id在哈希中提供这 2 个字段的值：
www.xyz.com/contact.html#name=some_text&email=more%20text
www.xyz.com/contact.html#name=some_text&email=more%20text
4 fields? 4 id's:
4个领域？4个身：
www.xyz.com/contact.html#name=some_text&email=more%20text&username=john&age=23
www.xyz.com/contact.html#name=some_text&email=more%20text&username=john&age=23
No need to edit the code, then.
那么无需编辑代码。
回答by aloisdg moving to codidact.com
A more modern way would be to use the URL()constructorand the searchParams property. Let the browser engine do the work!
更现代的方法是使用URL()构造函数和searchParams 属性。让浏览器引擎完成工作！
(new URL(window.location.href)).searchParams.forEach((x, y) =>
document.getElementById(y).value = x)
Try it online!or on 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>回答by Samuel Caillerie
You can retrieve your current url with window.location.hrefand then get the default message via a regular expression :
您可以使用以下方法检索当前 url，window.location.href然后通过正则表达式获取默认消息：
var msg = window.location.href.match(/\?setmessagefield=(.*)/);
document.getElementById("message").value = msg[1];
