Reading from input box onblur

Question

I'm trying to build a login page. I would like to read the information from the username text box to use in javascript with the onblur event. So ideally, when somebody tabs or clicks away after they've entered their name, the page will read in the name, and use it in a script to display information about that person. All of this would occur before the password is entered. Does anybody know of a way to read information from an input box in this manner? Here's what I have so far.

//This will display the content
function createDiv()
{
var divTag = document.createElement("div");
divTag.style.position = "absolute";
divTag.style.top = "95px";
divTag.style.left = "426px";
divTag.style.zIndex = "20";
divTag.innerHTML = "MSS";
document.getElementById('card').appendChild(divTag);
}
</script>
</head>

<body onload='init();'>

<div id="card" style="width:800px; z-index:10; height:600px; position:relative; margin-left:auto; margin-right:auto; text-align:center; margin-top:0px; background-image:url('customLoginBG.png'); background-repeat:no-repeat;">
<form method='post' action='/login'>
<ul style="list-style-type:none;">
<li> <input type='hidden' id='token' name='token' /> </li>

<!-- After tabbing away from here, I display content. -->
<li style="position:absolute; top:270px; left:260px;"> <input type='text' onblur="createDiv()" id='username' style="width:188px; height:26px; outline: none; border: none; border-color:transparent; background-image:url('inputBar.png'); " /> </li>

<li style="position:absolute; top:310px; left:260px;"> <input type='password' id='password' style="width:188px; height:26px; outline: none; border: none; border-color:transparent; background-image:url('inputBar.png'); " /> </li>
<li style="position:absolute; top:290px; left:455px;"> <input type='image' src="loginButton.png" value="Login" onclick='doLogin();' /> </li>      

</ul>  
</form>
</div>
</body>

Show us what you've tried so far. We don't mind helping people finish code, but most of us don't just "create from scratch." — Jeremy J Starcher, Sep 05 '12 at 13:58

score 1 · Answer 1 · answered Sep 05 '12 at 14:00

1

With jquery (1.7 or later) you just do

$("#inputboxname").on("blur", function () {
    var value = $(this).val();
    // Do stuff with value
}

answered Sep 05 '12 at 14:00

Erik Nordenhök

645
1
5
14

score 0 · Answer 2 · answered Sep 05 '12 at 14:00

0

$('input').blur(function() { console.log($(this).val()); }

answered Sep 05 '12 at 14:00

Phil

10,948
17
69
101

score 0 · Answer 3 · answered Sep 05 '12 at 14:01

0

You could assign the onblur event handler to the input:

<input id="username" type="text" />

document.getElementById("username").onblur = function () {
  var name = this.value;
  // do something with it
};

answered Sep 05 '12 at 14:01

João Silva

89,303
29
152
158

score 0 · Answer 4 · answered Sep 05 '12 at 14:02

document.getElementById('txtbox1').onblur = function(){
     alert(this.value);
}

However if your going to be doing a lot of javascript stuff, i'd learn to use the jQuery library, makes so many things far simplier. But understanding the basic of standard javascript is a must.

Reading from input box onblur

4 Answers4