How to input text into text field with javascript

Question

I have a form on a wordpress site with a text field for an email adress which looks like this:

<div class="tnp-field tnp-field-email"><label>Email</label><input class="tnp-email" type="email" name="ne" required></div>

I can get the email address from a get parameter (www.domain.com/?email=test@mail.com) like this:

<script type='text/javascript'>
function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        vars[key] = value;
    });
    return vars;
}

function getUrlParam(parameter, defaultvalue){
    var urlparameter = defaultvalue;
    if(window.location.href.indexOf(parameter) > -1){
        urlparameter = getUrlVars()[parameter];
        }
    return urlparameter;
}

var emailtxt = getUrlParam('email','');

How can I fill the text field with emailtxt?

Unmitigated · Accepted Answer · 2018-08-07T00:22:26.633

1

You can just set the value of the input field (HTMLInputElement.value = "value").

document.querySelector("input[name=ne]").value = getUrlParam('email','');

<div class="tnp-field tnp-field-email"><label>Email</label><input class="tnp-email" type="email" name="ne" required></div>
<script type='text/javascript'>
function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        vars[key] = value;
    });
    return vars;
}

function getUrlParam(parameter, defaultvalue){
    var urlparameter = defaultvalue;
    if(window.location.href.indexOf(parameter) > -1){
        urlparameter = getUrlVars()[parameter];
    }
    return urlparameter;
}

var emailtxt = getUrlParam('email','');
 console.log(emailtxt);
document.querySelector('input[name=ne]').value = emailtxt;
</script>

edited Aug 07 '18 at 00:22

answered Aug 06 '18 at 22:14

Unmitigated

76,500
11
62
80

Thanks but how can I address the correct input field? It doesn't have an ID because I created it with a plugin. – user363808 Aug 06 '18 at 22:15
You could use the `class` or `name` attributes – Cjmarkham Aug 06 '18 at 22:16
@user363808 You can use the name of the input field. `document.querySelector('input[name=ne]')` – Unmitigated Aug 06 '18 at 22:17
Note that `querySelector` in this case will get the first `input`. – Cjmarkham Aug 06 '18 at 22:17
It works now. I'm such an idiot. I had my javascript code in the header. Of course it can't work if the form isnt loaded yet I feel so embarres. Thanks for the help. – user363808 Aug 06 '18 at 23:42
@user363808 No problem. – Unmitigated Aug 07 '18 at 00:02

score 1 · Answer 2 · answered Aug 06 '18 at 22:34

1

You can try DOM id selector:

<input class="tnp-email" type="email" name="ne" id="yourId" required>

document.getElementById("yourId").innerHTML = "Your text";

answered Aug 06 '18 at 22:34

Gonzalo Zas Regueira

41
1
5

Thanks but I sadly can't add an ID to the textfield because it is generated by a plugin. Is here a way to use the class instead? – user363808 Aug 06 '18 at 22:40
Yes, you can, but you have to be careful with that because class selector will return all class name matching DOM elements. – Gonzalo Zas Regueira Aug 06 '18 at 22:53

score 1 · Answer 3 · answered Aug 06 '18 at 22:55

1

You can use DOM class name selector like this:

 var x = document.getElementsByClassName("tnp-email");
 x[0].value = "Your value";

answered Aug 06 '18 at 22:55

Gonzalo Zas Regueira

41
1
5

Sadly this doesn't work either. I didn't manage to use getElement so far with any of the suggested methods. – user363808 Aug 06 '18 at 23:37

How to input text into text field with javascript

3 Answers3