JavaScript to change input value by specifying form and class name

Question

I need a way to change the value of an input box by referring to it by form and class name. Given a form that looks like this:

<form name="foo">
<input type="text" class="bar" value="someval" />
</form>

Is there a one-line solution to this? I've tried some things such as:

document.foo.getElementsByClassName('bar')[0].setAttribute("value", "newvalue");

And

document.forms['foo'].getElementsByClassName('bar')[0].setAttribute("value", "newvalue");

To no avail. There must be something obvious I'm missing, but what?

Scott Marcus · Accepted Answer · 2019-04-22 22:37:05Z

2

This is precisely what .querySelector() was designed to help with. You can pass any valid CSS selector to it and it will return the first element that matches the query or undefined if no match is found.

And, don't use .getElementsByClassName() or document.forms (ever) as they are both ancient techniques that either introduce major performance issues or non-modern approaches that are inferior to the APIs we have today.

// Find the input element with a class of "bar" that is a direct child of a form with a name attribute of "foo"
document.querySelector("form[name='foo'] > input.bar").value = "blah"

<form name="foo">
  <input type="text" class="bar" value="someval" />
</form>

edited Apr 22, 2019 at 22:37

answered Apr 22, 2019 at 22:10

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

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

2 Comments

Rafe Over a year ago

I get the sense of your code but I'm still getting a null reference for some reason. Are there any "gotchas" to this approach when combined with programming MVC C#?

Scott Marcus Over a year ago

@Rafe You must run this code AFTER the HTML has been parsed, so put your script just before the closing BODY tag.

Harish Iyer · Accepted Answer · 2019-04-22 22:09:47Z

1

You can use something like this

document.forms[0].querySelector(".bar").value

And if you have multiple forms, just loop through document.forms and get values by class name, use querySelector or select by id whatever suits you.

Hope this helps.

answered Apr 22, 2019 at 22:09

Harish Iyer

767 bronze badges

3 Comments

Scott Marcus Over a year ago

You're mixing the BOM and the DOM. It works, but really makes no sense.

Harish Iyer Over a year ago

Can you give me more clarification, like as per my understanding BOM would include access and manipulation of the browser window? I understand this is not the most elegant way the code and you answer makes more sense.

Scott Marcus Over a year ago

document.forms[0] Uses the "Browser Object Model", which is a de facto standard from the earliest days of web scripting. .querySelector() is part of the W3C Document Object Model standard that all modern code should utilize.

Raphael Alvarenga · Accepted Answer · 2019-04-22 22:18:23Z

1

Try this:

<form>
    <input type="text" class="bar" value="someval" />
</form>

<script>
    document.getElementsByClassName("bar")[0].value = "newvalue";
</script>

answered Apr 22, 2019 at 22:18

Raphael Alvarenga

1,0481 gold badge9 silver badges15 bronze badges

1 Comment

Scott Marcus Over a year ago

No, no, no!

Collectives™ on Stack Overflow

JavaScript to change input value by specifying form and class name

3 Answers 3

2 Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest