CODEWITHSUNDEEP
javascriptjquery
Steven
Steven

Reputation: 697

Trying to get Uppercase lowercase jquery code to work

I have the following Code: 

$(document).on('blur', '.upperlower', function() {
  var z = document.getElementById("text").value;
  var x = z.toLowerCase();
  x = x.replace(/\b./g, function(m) {
    return m.toUpperCase();
  });
  alert(x);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="form-control upperlower" placeholder="Last Name, First Name">

and I am missing why the jQuery does not execute to change the input case.

Can anyone cast me a string?

Upvotes: 1

Views: 124

Answers (4)

dippas
dippas

Reputation: 60563

you always can use this for your callback function in jQuery.

P.S. - You don't have id="text" in your input.

$(document).on('blur', '.upperlower', function() {
  var z = this.value;
  var x = z.toLowerCase();
  x = x.replace(/\b./g, function(m) {
    return m.toUpperCase();
  });
  console.log(x);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="form-control upperlower" placeholder="Last Name, First Name">

Upvotes: 1

trincot
trincot

Reputation: 350310

You search for an element with id=text, but you don't have that. It is better to use this which is provided by jQuery to your callback function:

$(document).on('blur','.upperlower',function(){
    var z=this.value;
    var x=z.toLowerCase();
    x=x.replace(/\b./g, function(m){ return m.toUpperCase(); });
    alert(x);   
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control upperlower" placeholder="Last Name, First Name">

If you want to have this happen also when the form submits, then also capture that submit event. In below snipped no alert is given, but the replacement is done on the input value. I have commented out the action on the blur event, so it is clear that the submit button also performs that action:

// create a named function, so both event handlers can use the same code:
function upperLower(){
    this.value = this.value.toLowerCase()
         .replace(/\b./g, function(m){ return m.toUpperCase(); });
}

// Uncomment this line if you want the action to happen on blur as well 
//$(document).on('blur','.upperlower', upperLower);

$('form').on('submit', function() {
    $('.upperlower').each(upperLower);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" class="form-control upperlower" placeholder="Last Name, First Name" value="john DOE">
<input type="submit" value="submit">
</form>

Upvotes: 4

HenryDev
HenryDev

Reputation: 4953

This should do what you need. Hope it helps :)

$(document).on('blur','.upperlower',function(){
            var z= $(this).val();
            var x= z.toLowerCase();
            x=x.replace(/\b./g, function(m){ return m.toUpperCase(); });
            alert(x);   
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<input type="text" id = "myID" class="form-control upperlower" placeholder="Last Name, First Name">

Upvotes: 0

S&#248;lve
S&#248;lve

Reputation: 4406

Stick to jquery :)

$(document).on('blur','.upperlower',function(){
            var z=$("#text").val();
            var x=z.toLowerCase();
            x=x.replace(/\b./g, function(m){ return m.toUpperCase(); });
            alert(x);   
});

Changed the var z=document.getElementById("text").value; to var z=$("#text").value();

DEMO

Upvotes: 0

Related Questions