CODEWITHSUNDEEP
javascripthtml
iPhoneDeveloper
iPhoneDeveloper

Reputation: 593

Javascript, viewing [object HTMLInputElement]

I'm just started to learn HTML. Doing an alert() on one of my variables gives me this result [object HTMLInputElement].

How to get the data, that were added in text field, where my input type is text?

Upvotes: 39

Views: 280376

Answers (7)

Y. Joy Ch. Singha
Y. Joy Ch. Singha

Reputation: 3262

<input type="text" id="name">

and in javascript

var nameVar = document.getElementById("name").value;

alert(nameVar);

Upvotes: 2

simonzack
simonzack

Reputation: 20938

Say your variable is myNode, you can do myNode.value to retrieve the value of input elements.

Chrome Developer Tools has a Properties tab which shows useful DOM attributes.

Also see MDN for a reference.

Upvotes: 43

Harsh Aryan
Harsh Aryan

Reputation: 81

It's not because you are using alert, it will happen when use document.write() too. This problem generally arises when you name your id or class of any tag as same as any variable which you are using in you javascript code. Try by changing either the javascript variable name or by changing your tag's id/class name.

My code example: bank.html

<!doctype html>
<html>
<head>
    <title>Transaction Tracker</title>
    <script src="bank.js"></script> 
</head>
    <body>
        <div><button onclick="bitch()">Press me!</button></div>
    </body>
</html>

Javascript code: bank.js

function bitch(){ amt = 0;
var a = Math.random(); ran = Math.floor(a * 100);
return ran; }

function all(){
amt = amt + bitch(); document.write(amt + "
"); } setInterval(all,2000);

you can have a look and understand the concept from my code. Here i have used a variable named 'amt' in JS. You just try to run my code. It will work fine but as you put an [id="amt"](without square brackets) (which is a variable name in JS code )for div tag in body of html you will see the same error that you are talking about. So simple solution is to change either the variable name or the id or class name.

Upvotes: 6

erevos13
erevos13

Reputation: 411

When you get a value from client make and that a value for example.

var current_text = document.getElementById('user_text').value;
        var http = new XMLHttpRequest();
        http.onreadystatechange = function () {

            if (http.readyState == 4 &&  http.status == 200 ){
                var response = http.responseText;
              document.getElementById('server_response').value = response;
                console.log(response.value);


            }

Upvotes: -1

Back Door
Back Door

Reputation: 21

change:

$("input:text").change(function() {
    var value=$("input:text").val();
    alert(value);
});

to

$("input:text").change(function() {
    var value=$("input[type=text].selector").val();
    alert(value);
});

note: selector:id,class..

Upvotes: 2

Alex Kulinkovich
Alex Kulinkovich

Reputation: 4778

<input type="text" />
<script>
$("input:text").change(function() {
    var value=$("input:text").val();
    alert(value);
});
</script>

use .val() to get value of the element (jquery method), $("input:text") this selector to select your input, .change() to bind an event handler to the "change" JavaScript event.

Upvotes: 1

Xavi L&#243;pez
Xavi L&#243;pez

Reputation: 27880

If the element is an <input type="text">, you should query the value attribute: 

alert(element.value);

See an example in this jsFiddle.

Also, and seeing you're starting to learn HTML, you might consider using console.log() instead of alert() for debugging purposes. It doesn't interrupt the execution flow of the script, and you can have a general view of all logs in almost every browser with developer tools (except that one, obviously).

And of course, you could consider using a web development tool like Firebug, for instance, which is a powerful addon for Firefox that provides a lot of functionalities (debugging javascript code, DOM inspector, real-time DOM/CSS changes, request monitoring ...)

Upvotes: 35

Related Questions