Question

所以我有这个带有1个输入字段的简单表单，用url中的参数填充输入字段...

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

正如您所看到的，它填充了输入字段。

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

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

如何编辑代码，以便填充该特定类的所有输入字段？

代码

<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

你可以得到参数值，填充输入有class email_address＆amp;与大多数主流浏览器合作。 注意：您应该encodeURIComponent参数值是安全的

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

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

使用来自URL的Paramter填充多个输入字段...（半工作）

2 个答案: