Trying to get Uppercase lowercase jquery code to work

Question

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.

• input : JOHN DOE expected output : John Doe

Can anyone cast me a string?

Answer 1

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> 

Answer 2

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

PS - 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"> 

Answer 3

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

Answer 4

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">