通过html中的URL预填表单字段 [英] Pre-fill form field via URL in html

问题描述

我正在寻找一种简单的方法来预填充联系表单中的字段。 >这是我在html中的联系表单：

 < form method =postaction =submit.php> 
< p>您的名字：
< br />< input name =name/>< / p> 
< p>您的电子邮件地址：
< br />< input name =email/>< / p> 
< p>您的信息：
< br />< textarea name =messageid =messagerows =10cols =50>< / textarea> ;< / p为H. 
< p>< input type =submitvalue =Send/>< / p> 
< / form> 
  

我想在用户点击一个网址时用some text来填充message如 www.xyz.com/contact.html?setmessagefield=some_text

解决方案

< JavaScript没有内置函数来解析url参数（因为这些GET参数通常用于发送数据到服务器）。
我建议使用散列代替（哈希是纯粹是客户端）：

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

现在，添加一些 id 的字段：

 < p>您的名字：
< br />< input name =nameid =name/> ;< / p为H. 
 
< p>您的电子邮件地址：
< br />< input name =emailid =email/>< / p> 
  

然后在加载时设置这样的值：

  var hashParams = window.location.hash.substr（1）.split（'&'）; // substr（1）删除`＃`
 for（var i = 0; i< hashParams.length; i ++）{
 var p = hashParams [i] .split（'=' ）; 
 document.getElementById（p [0]）。value = decodeURIComponent（p [1]）;; 
} 
  

工作示例

这样做的一大优点是灵活性。如果你想设置2个字段的值，你可以在哈希中提供这2个字段' id '：

< blockquote>

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

无需编辑代码，然后。

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 :

<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

解决方案

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):

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

Now, add some id's to your fields:

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

Working example

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:

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

4 fields? 4 id's:

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

No need to edit the code, then.

这篇关于通过html中的URL预填表单字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！