使用来自 Url... 的参数填充多个输入字段（半工作）

Question

所以我有一个带有 1 个输入字段的简单表单，该表单使用来自 url...

的参数填充输入字段

这是演示： https://output.jsbin.com/wohegu?getmail=max@email.com

如您所见，它填充了输入字段。

问题
我在响应式页面中使用此表单，并且有 2 个类似的表单。根据访问者的设备，其中一个被隐藏（显示：none）。

但此代码仅填充第一个表单的电子邮件输入。

我如何编辑代码，以便它用特定的 class 填充所有输入字段？

代码

<input type='text' class='email_address' name='email_address' value=''>

var getmail = document.querySelector('input.email_address');
if (getmail) {
    var t = document.location.href.split('?')[1];
    if (t) {
        var params = {};
        var lst = t.split('&'), l = lst.length;
        for (var i = 0; i < l; i++) {
            var p = lst[i].split('=');
            if (!p[1]) continue;
            params[p[0]] = p[1];
        }

        if (params.getmail) {
            getmail.value = params.getmail;
        }
    }
}

我尝试了 document.querySelectorAll 和 document.getElementsByClassName 但无法使用...

请指点一下。 :)

谢谢...

Answer 1

.querySelector 仅选择第一个匹配元素，而 .querySelectorAll 选择所有匹配元素。因此，要么使您的 css 选择器查询使其变得唯一，要么使用 .querySelectorAll 然后过滤到所需的元素。

var getmails = document.querySelectorAll('input.email_address');

if (getmails) {
    var t = document.location.href.split('?')[1];
    if (t) {
        var params = {};
        var lst = t.split('&'), l = lst.length;
        for (var i = 0; i < l; i++) {
            var p = lst[i].split('=');
            if (!p[1]) continue;
            params[p[0]] = p[1];
        }

        if (params.getmail) {
           for(var i =0; i<getmails.length;i++)
            getmail[i].value = params.getmail;
        }
    }
}

<input type='hidden' class='email_address' name='email_address' value='' >

<input type='text' class='email_address' name='email_address' value=''>

Answer 2

您可以获得参数值并填充输入 class email_address 并且适用于大多数主流浏览器。 注意： 你应该 encodeURIComponent params 值是安全的并且

function getParam(name) {
    name = name.replace(/[\[]/, "\[").replace(/[\]]/, "\]");
    var regex = new RegExp("[\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

var input = document.getElementsByTagName('input');
for(var i=0;i<input.length;i++){
if(input[i].className =='email_address'){
input[i].value = getParam('getmail');
}
}

使用来自 Url... 的参数填充多个输入字段（半工作）

Populate Multiple Input Fields With Paramter From Url... (Half Working)

html

javascript

forms

auto-populate