CODEWITHSUNDEEP
javascripthtmlformsdatasetgetattribute
Abhishek Aggarwal
Abhishek Aggarwal

Reputation: 127

How to get values of HTML tags (getAttribute is returning NULL)

I want to get the values of the value-tag of all the fields.

e.g. I want to get:

My HTML code which is currently giving NULL and Undefined

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<body>

 <form name="form1" method="post" action="http://abc/Home/default.aspx" id="form1">

    <div><input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTUwMTUxNzcwOGRklQy3YSnUhKEGDrFOOy2aa5Lg4qY="></div>
    <div><input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="83BB589F"></div>
    <div><input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBwKN/dHeCAKl1bKzCQK1qbSRCwKpiJ/dDgKE8/3/CQKM+5aFCQKM54rGBs1XK43QekWbnANIKpGR9+Q85Kji"></div>
    User Name<input name="txtUserName" type="text" id="txtUserName" value="0151CSE003">
    Password<input name="txtPassword" type="password" id="txtPassword"  value="@Abhishek">
    <input type="submit" name="Ulogin" value="Login"  id="Ulogin" >

</form>
<br><br>
<div id="op"></div>

<script>

{
    //var x=document.getElementsByTagName("div")[0].getAttribute('value');
    var x=document.getElementsByTagName("div")[1];


    alert(x.getAttribute('data-value'));
    alert(x.dataset.value);

    document.getElementById("op").innerHTML=x;

}
</script>

</body></html>

Upvotes: 2

Views: 1494

Answers (4)

SONIK
SONIK

Reputation: 3

OK, your JavaScript is a bit messy. The code below should fit your requirements. Use Value property with getElementById

var VIEWSTATE = document.getElementById("__VIEWSTATE").value;
  var VIEWSTATEGENERATOR = document.getElementById("__VIEWSTATEGENERATOR").value;
  var EVENTVALIDATION = document.getElementById("__EVENTVALIDATION").value;
  var UserName = document.getElementById("txtUserName").value;
  var Password = document.getElementById("txtPassword").value;

alert(VIEWSTATE +"\n" + VIEWSTATEGENERATOR +"\n" +  EVENTVALIDATION + "\n" + UserName+"\n"+Password);

I personally recommend you use jquery - it is much easier to use, uses fewer lines of code and is powerful.

Here is the code:

var VIEWSTATE = $("#__VIEWSTATE").val();
  var VIEWSTATEGENERATOR = $("#__VIEWSTATEGENERATOR").val();
  var EVENTVALIDATION = $("#__EVENTVALIDATION").val();
  var UserName = $("#txtUserName").val();
  var Password = $("#txtPassword").val();

alert(VIEWSTATE +"\n" + VIEWSTATEGENERATOR +"\n" +  EVENTVALIDATION + "\n" + UserName+"\n"+Password);

Upvotes: 0

Arthur Tsidkilov
Arthur Tsidkilov

Reputation: 5421

if you need take values of inputs, i can do it directly:

    var x=document.getElementsByTagName("input");
    var showValues = '<ul>';

    for(var i=0, len=x.length; i<len; i++){
        if(x[i].id != "Ulogin"){
            showValues +='<li>'+x[i].value + '</li>';
        }
    }
    showValues += '</ul>';

    document.getElementById("op").innerHTML=showValues;

i have wrapped it in ul-li tags, if you would like to show it to user

Upvotes: 0

David Lampon
David Lampon

Reputation: 500

Please check this code and see how it's working to get the values. Some pieces of your code were a little bit wrong.

var viewState = document.querySelector("#__VIEWSTATE");
var viewStateGenerator = document.querySelector("#__VIEWSTATEGENERATOR");

console.log(viewState.value);
console.log(viewStateGenerator.value);

document.querySelector('#op').innerHTML = viewState.value;

Upvotes: 2

Sam Kotlove
Sam Kotlove

Reputation: 196

It should be

 x.getAttribute('value')

You don't add the "data-" tag retroactively, it would have to be included.

Upvotes: 0

Related Questions