I am writing a script with pure JS and need to select a text input from a page that has a random name each time:

<input type="text" name="N8PkpWeLsNRQBjvwcwKULB57utJx5L2u0Ko" class="form-control" value="">

Normally i would select it using ID like:

var textinput = document.getElementById("myInput1");

There is no ID however, how can i select this element?

As far as i can see it appears to be the only text input on the page.

I planned on setting some text like this:

HTMLInputElement.prototype.setText = function(text) {
    this.value = text;
};

var el = document.querySelectorAll('input[type=text]')[0];
el.setText("Hi");

But this does not work for some reason?

I am writing a script with pure JS and need to select a text input from a page that has a random name each time:

<input type="text" name="N8PkpWeLsNRQBjvwcwKULB57utJx5L2u0Ko" class="form-control" value="">

Normally i would select it using ID like:

var textinput = document.getElementById("myInput1");

There is no ID however, how can i select this element?

As far as i can see it appears to be the only text input on the page.

I planned on setting some text like this:

HTMLInputElement.prototype.setText = function(text) {
    this.value = text;
};

var el = document.querySelectorAll('input[type=text]')[0];
el.setText("Hi");

But this does not work for some reason?

• javascript
• text
• input

• 1 document.querySelector('input.form-control[type=text]') see developer.mozilla/en-US/docs/Web/API/Document/querySelector – Satpal Commented Nov 21, 2016 at 13:24
• Thanks but when i try: var textinput = document.querySelector('input.form-control[type=text]');textinput.setText("Hi"); it doesn't seem to set the text? – zeddex Commented Nov 21, 2016 at 13:28
• See the working snippet in my answer – Satpal Commented Nov 21, 2016 at 13:34

4 Answers 4

You can use document.querySelector(selectors) it returns the first matching element within the document.

document.querySelector('input.form-control[type=text]')

HTMLInputElement.prototype.setText = function(text) {
  this.value = text;
};
var textinput = document.querySelector('input.form-control[type=text]');
textinput.setText("Hi, You can no use setText method.");

<input type="text" name="N8PkpWeLsNRQBjvwcwKULB57utJx5L2u0Ko" class="form-control" value="">

To get the first text field use the following.

var txtField=document.querySelectorAll('input[type=text]')[0];

To set the text you could simply do.

txtField.value="your Value";

This way you can select any HTML tag , since you only have 1 input, this should work for you

   var input = document.getElementByName('input');

Try this

var x = document.getElementsbyClassname("form-control").getAttribute("value");