CODEWITHSUNDEEP
javascriptjquery
WoJ
WoJ

Reputation: 30054

How to update a field on .focusout()?

I would like, upon loosing focus on an <input> field, to perform a few operations on the value of this field, including changing the content itself (so that it is uppercase)

In the following code:

HTML

<input id="name" type="text"></input>
<div id="upper"></div>

JavaScript + jQuery

$("#name")
  .focusout(function() {
    // get the text from the form which lost focus
    name = $("#name").val();
    // turn it into uppercase
    name = name.toUpperCase();
    // update the form and another entry
    $("#upper").text(name);
    $("#name").text(name);
  })

the event is correctly caught and the <div> is updated with the lowercase text. The content of the field, however, is not updated.

Is it possible to update the content of an <input> field upon leaving it?

Upvotes: 0

Views: 2142

Answers (2)

Rayon
Rayon

Reputation: 36609

Use jQuery.val() to set the Value, not jQuery.text(), also note this in handler-function refers to Element on which event is invoked hence this could be used instead of specified-selector

You could try this simplified code:

$("#name").focusout(function() {
  var name = this.value.toUpperCase();
  $("#upper").text(name);
  $(this).val(name);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input id="name" type="text"></input>
<div id="upper"></div>

Upvotes: 0

Mudassir Hasan
Mudassir Hasan

Reputation: 28771

Change text() to val() for field

$("#name").val(name);

Upvotes: 1

Related Questions