Question

我有一个vanilla html页面，里面有一个表单。已经要求能够通过URL预先填充表单。类似的东西：

http://some.site.com/somePage.html?forename=Bob&surname=Jones

我似乎无法找到任何简单的解决方案。有人可以通过一些javascript指向我正确的方向来实现这一目标吗？很高兴使用javascript解决方案，但我更愿意避免只为这一次使用而拉入整个库（目前没有使用）。感谢。

Answer 1

使用自定义查询字符串Javascript函数。

function querySt(ji) {

    hu = window.location.search.substring(1);
    gy = hu.split("&");

    for (i=0;i<gy.length;i++) {
        ft = gy[i].split("=");
        if (ft[0] == ji) {
            return ft[1];
        }
    }
}
var koko = querySt("koko");

然后将检索到的值分配给输入控件;类似的东西：

document.getElementById('mytxt').value = koko;

Answer 2

您使用的是PHP吗？如果是这样，那会让事情变得更容易。假设您的链接如上，您可以使用：

<?php
$forename = $_GET['forename'];
$surname = $_GET['surname'];
?>
----------
<input id='forename' type='text' value='<?php echo $forename; ?>' >
<input id='surname' type='text' value='<?php echo $surname; ?>' >

那应该预先为你填充。

Answer 3

function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');

    for(var i = 0; i < hashes.length; i++)
        {
         hash = hashes[i].split('=');
         vars.push(hash[0]);
         vars[hash[0]] = hash[1];
         }

     return vars;
}

var get = getUrlVars();

//returns get['forename'] == bob; surname == jones

Answer 4

这里是内置方式，供参考： https://developer.mozilla.org/en-US/docs/Web/API/URL/searchParams

您可以将当前地址的参数实例化为 URL 对象，而无需导入任何库，如下所示：

let params = (new URL(document.location)).searchParams;

然后你可以直接引用它们：

let name = params.get('name');

或者您可以使用循环遍历它们，例如：

for (const [key, value] of params.entries()) {}

如何从url参数预先填充html表单输入字段？

4 个答案: