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.

How do I do this?

Answer 1

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

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

Answer 4

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 5

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

Answer 6

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