Get the element name attribute in JavaScript

Question

How can I get the element name attribute in JavaScript?

HTML :

<input class="so" name="Name" value="bob"></input>
<input class="so" name="LastName" value="Feyzi"></input>
<input class="so" name="Email"></input>
<input class="so" name="Address"></input>
<input type="submit"></input>

JavaScript :

var person={};
var cars = document.querySelectorAll(".so");
for (i = 0; i < cars.length; i++) { 
  var elname = document.getElementByClassName('.so')[i].getAttribute('name');
  //var eln = document.getElementsByTagName("input")[i].getAttribute("name");
  var vala = document.querySelectorAll('.so')[i].value;
  //alert(vala);
  alert(elname);
}

After I run the script I want the person object to be set with this data:

person {
    Name: "bob",
    LastName: "Feyzi",
    Email: "",
    Adderss: ""
}

JSFiddle

Plural. getElementsByClassName not getElementByClassName. — j08691
– j08691, Commented Jan 9, 2015 at 17:54
Why use document.getElementsByTagName("input") while you could use cars as reference in your for lus? E.g. cars[i].value — Mouser
– Mouser, Commented Jan 9, 2015 at 17:55
Also, you are not supposed to have .so, rather so. You have already specified that you are looking for a class. — msfoster
– msfoster, Commented Jan 9, 2015 at 17:59

souslov · Accepted Answer · 2015-01-09 17:59:53Z

6

Use the collection that you've already found with querySelectorAll to get the values of the value and name attributes :

var person = {}
var cars = document.querySelectorAll(".so")
for (i = 0; i < cars.length; i++) { 
  person[cars[i].name] = cars[i].value
}
console.log(person)

JSFiddle

edited Jan 9, 2015 at 17:59

answered Jan 9, 2015 at 17:53

souslov

44.7k11 gold badges92 silver badges113 bronze badges

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

Comments

zozo · Accepted Answer · 2015-01-09 17:55:48Z

1

Because getElementByClassName does not exist (also it would have no use in your script). Use this:

 var person={};
 var cars = document.querySelectorAll(".so");
 for (i = 0; i < cars.length; i++) { 
       alert(cars[i].name)
 }

answered Jan 9, 2015 at 17:55

zozo

8,64019 gold badges83 silver badges142 bronze badges

Comments

Andrew Dunai · Accepted Answer · 2015-01-09 17:57:06Z

Firstly, use cars variable instead of calling querySelectorAll every time. Secondly, use addEventListener to execute code on click.

Fiddle: http://jsfiddle.net/guyavunf/3/

Code:

// HTML
<input class="so" name="Name" value="bob"></input>
<input class="so" name="LastName" value="Feyzi"></input>
<input class="so" name="Email"></input>
<input class="so" name="Address"></input>
<input class="submit" type="submit"></input>

// JS
document.querySelector('.submit').addEventListener('click', function() {
    var person={};
    var cars = document.querySelectorAll(".so");
    for (i = 0; i < cars.length; i++) { 
        var name = cars[i].name;
        var value = cars[i].value;
        alert(name + ': ' + value);
    }
});

Collectives™ on Stack Overflow

Get the element name attribute in JavaScript

JSFiddle

3 Answers 3

JSFiddle

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related