jQuery n00b question: locating text and performing operation based on its existence

Question

I'm trying to learn jQuery, but it's coming slowly as I really don't know any JavaScript.

My site is in VB.NET and I'm putting jQuery code on both my actual .ascx UserControl and in a separate file (something like myscripts.js). This is because I'm using webforms as I still don't know MVC well enough to implement it, so I have to get the clientID's on the page.

What I would like to do is the following:

1. Grab text from a textbox and make it all lowercase

2. Get the username from the login info. I've done this like so on my actual page:

   var userName = "<%=Split(System.Web.HttpContext.Current.User.Identity.Name.ToLowerInvariant, '|')%>";
   

3. Check to see if the username is in the text. If it IS in the text, I want to set a variable to "false", othewise to true.

I know there are a ton of jQuery experts out there... can anyone help? Thanks so much!

PS if I'm not clear on anything, let me know and I will supply more info.

Answer 1

The basics of JQuery are like so: Find a list of dom elements, and perform actions on them.

In your case, you should start off by finding the dom element that is your testbox. For example's sake, we'll choose $('#userName'). The selector # means "id" and together with the name "userName" it finds all elements with the id of "userName". (Ids on a page should be unique if you're following best practices.)

Once you have that list (in this case, a list of one element), you can ask it what the value is.
$('#userName').val()

This gets you the value of the value="" attribute of the input tag.

You can then assign it to a variable and use standard javascript String functions to do the rest!

Answer 2

var userName = "username as it comes out of your web app";

// stuff happens

var $myTextbox = $('#ID_of_textbox');
var userNameIsContained = $myTextbox.val().toLowerCase().indexOf(userName) >= 0;

Short explanation:

$('#ID_of_textbox')  // fetches the jQuery object corresponding to your textbox
.val()               // the jQuery function that gets the textbox value
.toLowerCase()       // self explanatory
.indexOf()           // returns the position of a string in a string (or -1)

See the JavaScript String object reference at w3schools.

Alternative (to check if the textbox value equals the username):

var userNameIsEqual = $myTextbox.val().toLowerCase() == userName;

Answer 3

I am completely ignorant of the ASP.NET side of it, but as far as jQuery and Javascript....

To get the value of a text field, you use the jQuery function val():

var value = $('#mytextbox').val();

To turn a string to lower case, you use the string method toLowerCase():

var value = $('#mytextbox').val().toLowerCase();

Since val() returns a string we can throw that at the end.

To check if a string is within another string, you use the string method indexOf():

var needle = 'Hello';
var haystack = 'Hello World';
var match = haystack.indexOf(needle); // -1 if no matches, 0 in this case

Answer 4

function checkLogin(userName){
    return $('#mytextbox').val().toLowerCase() == userName
}

Answer 5

if ($("#textBoxID").val()) != "") { /*Do stuff*/ }

Answer 6

Another thing to remember is that ASP.NET renames all your control ID's. To access your controls in JavaScript, you should use the following in place of the Control ID <%= txtUserName.ClientID %>.

In jQuery, here is what my selector would look like for a textbox with the ID "txtUserName".

$('#<%= txtUserName.ClientID %>')

Enjoy,

Zach