CODEWITHSUNDEEP
javascripthtmldom
Marshal
Marshal

Reputation: 15

Selecting tags, replacing values (JavaScript)

Before today I have never before used JavaScript so I'm trying to learn as I go here.

On a webpage I want to select all html input tags with the class "exampleClass" and I want to replace the value. Can anyone show me a good/quick code snippet on how to do this or point me in the right direction to another thread or tutorial?

Thank you!

Upvotes: 0

Views: 117

Answers (5)

jfriend00
jfriend00

Reputation: 708156

Plain Javascript

In plain javascript (no jQuery-like framework), you could do it like this:

var list = document.getElementsByClassName('exampleClass');

for (var i = 0, len = list.length; i < len; i++) {
    list[i].value = "foo";
}

But, getElementsByClassName() isn't supported in older versions of IE (not until IE9). If you want to make the plain JS version work with older browsers, then you have to get a substitute for getElementsByClassName() for use when it isn't supported. There are many implementations which you can find with Google. Here's one of them: http://robertnyman.com/2008/05/27/the-ultimate-getelementsbyclassname-anno-2008/.

jQuery

Frameworks like jQuery are very, very useful for this kind of operation and they have better cross-browser and old-browser support. In jQuery, this operation would work pretty much everywhere and be just this one line.

$(".exampleClass").val("foo");

Sizzle

If you want good cross-browser support, but want something lighter weight than jQuery, you can use just the Sizzle selector library (which is what is used inside of jQuery) in which case the code would be this:

var list = Sizzle('.exampleClass');

for (var i = 0, len = list.length; i < len; i++) {
    list[i].value = "foo";
}

Upvotes: 0

Allen Liu
Allen Liu

Reputation: 4038

Well, since you are new to JavaScript then jQuery would be an easy to start because it has very powerful selectors that are relatively easy to write vs. plain JavaScript. A jQuery example would look like this:

Try this:

<!-- Uses jQuery library hosted by Google -->
<script language="javascript" scr="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>

$('.exampleClass').val('replacedValue');

Upvotes: 0

Jose Faeti
Jose Faeti

Reputation: 12314

var elements = document.getElementsByClassName('myClass');

for ( var x = 0, len = elements.length; x < len; x += 1 )
{
    elements[x].value = 'your value here';
}

If you want a better hint of how it works, be sure to check this answer.

Upvotes: 1

Joe
Joe

Reputation: 82654

This is trivial if you use jQuery:

$('input.exampleClass').val('New Value');

or if no IE7 support is required querySelectAll

elementList = document.querySelectorAll('input.exampleClass');
for(var i = 0; i < elementList.lenght; i++) {
    elementList[i].value = "New Value";
}

or filter all input tags with getElementsBytagName:

var element,
  elementList = document.getElementsByTagName('input');
for(var i = 0; i < elementList.lenght; i++) {
    element = elementList[i];
    if(element.className == "exampleClass") {
         element.value = "New Value";
    }
}

Upvotes: 1

Naftali
Naftali

Reputation: 146360

var exClass = document.getElementsByClassName('exampleClass');

for(var i = 0; i < exClass.length; i++) {
    exClass[i].value = "new Value";
}

Fiddle Demo: http://jsfiddle.net/maniator/4aWje/

Upvotes: 0

Related Questions