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

Question

So I have this simple form with 1 input field that populates the input field with a parameter from the url...

Here's the demo: https://output.jsbin.com/[email protected]

So as you can see, it populates the input field.

THE PROBLEM
I am using this form in a responsive page and there are 2 of these similar forms. As per the visitor's device, one of them gets hidden (display:none).

But this code only populates the first form's email input.

How can I edit the code so that it will populate all input fields with that particular class?

THE CODE

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

I tried document.querySelectorAll and document.getElementsByClassName but doesn't work with it...

Some direction please. :)

Thanks...

Instead of populating hidden element just populate visible matched element — vinayakj
– vinayakj, Commented Jul 26, 2015 at 14:02

Egy Success · Accepted Answer · 2015-07-26 15:11:47Z

1

you can get parameter value and populate inputs has class email_address & working with most major browsers. Note: you should encodeURIComponent params value to be safe and

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

answered Jul 26, 2015 at 15:11

Egy Success

1121 gold badge1 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Amod Over a year ago

Works like a dream! :) Just one thing, if the input has multiple classes (they have couple for styling), it doesn't work? What can I do in that case? (Id's wouldn't work right?)

Amod Over a year ago

Ok got it working with id's, and also populates even if multiple forms with same id's...

vinayakj · Accepted Answer · 2015-07-27 05:10:12Z

0

.querySelector selects only first matching element whereas .querySelectorAll selects all matching elements. So either make your css selector query such that it can become unique else use .querySelectorAll and then filter to the required element.

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=''>

edited Jul 27, 2015 at 5:10

answered Jul 26, 2015 at 13:59

vinayakj

5,7013 gold badges30 silver badges49 bronze badges

2 Comments

Amod Over a year ago

Hi, thanks for your input Vinayak, but your solution wouldn't help because users tilt mobile devices (landscape/portrait modes) so forms can get hidden and displayed on the fly. So I don't know if your code would work in that case? But still, thanks again for your precious time...

Amod Over a year ago

Nope, this is not working. Tried recreating on jsbin, doesn't work. And anyway, the above code by Egy worked for my situation...

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related