Input Values In jQuery: What, Where, And How

jquery input valueInput values are easy to read and set in jQuery; it all comes down to the val() method, which is simple to use, but can be quite versatile, once you know how to put it to work.

Interested in jQuery and JavaScript?  They have a lot to offer, and good programmers are always in demand  —  and there are many, many excellent online courses available in all aspects of web development and design.

What Is jQuery?

jQuery is a library of JavaScript routines that make it easy to do some things which would be time-consuming and difficult to program from scratch, including tasks involving appearance, visual effects, and user input and output in the client’s browser. jQuery itself is a single file of open-source JavaScript code which is available for downloading; you can link to a local copy, or to one of the publicly-available installations (including those hosted by Google, Amazon, and Microsoft.

Using jQuery

To use jQuery, you first link to a copy of the jQuery library.  The link (in the <head> section of the page) will look something like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

The above example links to an online version of the jQuery library.  A link to a local version would simply substitute the local path.

The general syntax for calling up a jQuery routine is as follows:

$ (select_an_element).some_method(argument1,argument2,etc);
or
$ (select_an_element).some_method(function() {function_code});

The first example passes arguments to or from the method; the second version runs whatever code is between the wavy brackets (which can include one or more jQuery or JavaScript methods, classes, etc.).

The val() Method

The jQuery val() method returns or sets the value of an HTML <input> form field.  The following code returns the value of an input field, and displays it in an alert:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#get_it").click(function(){
    alert("You said that you're " + $("#i_am").val() + ".  
     Is that really your name, or did you just make it up?");
  });
});
</script>
</head>
<body>
<p>Who are you?</p> 
<p><input type="text" id="i_am" ></p>
<button id="get_it">That's who I am!</button>
</body>
</html>

You can copy the code to a text file, give it the extension .HTM, and open it in a browser to test it out.  If, for example, you were to enter the name “Lin” in the input field, then click on the “That’s who I am” button, the program would display an alert box with the following message:

You said that you're Lin. Is that really your name, or did you just make it up?

What’s Going On

What’s going on in the above sample? First, since we’re talking about input values, we need ways for the user to input a value, and to tell the program to do something with it.  We handle these in the <body> section using standard HTML:

<p>Who are you?</p>
<p><input type=”text” id=”i_am” ></p>
<button id=”get_it”>That’s who I am!</button>

It’s pretty straightforward:  a prompt, an input box, and a button.  Note that we gave the input box and the button their own IDs.  In a lot of situations, you could get away without using IDs, but using them makes the code much easier to revise or debug.

Now For The jQuery

As we mentioned earlier, it’s generally a good idea to place the jQuery code within the ready() method’s function, so that’s what we do.  Let’s strip away the ready(function(){… }) part, and look at what we put inside:

  $("#get_it").click(function(){
    alert("You said that you're " + $("#i_am").val() + ".  
    Is that really your name, or did you just make it up?");
  });

First, we respond to the button, selecting it by its ID (“#get_it”), and taking action when the user clicks it (if there’s no click, we don’t do anything).  Our response to the click is contained within the click() method’s function:

     alert("You said that you're " + $("#i_am").val() + ".  
    Is that really your name, or did you just make it up?");

We respond to the click by displaying a standard JavaScript alert box. The alert() syntax is very simple  —  whatever text is in the parentheses appears in the alert box.  alert() only takes text (not HTML, images, etc), or in this case, the output of an operation that returns text: the jQuery val() method.  We select the input by ID (“#i_am”), and simply return its value; if you enter “Lin” in the input box, that’s what val() passes to alert().

Varying It With Variables

We can also set a variable to equal the value, then use the variable in the alert output, like this:

  var the_name = $("#i_am").val();
    alert("You said that you're " + the_name + ".  Is that really your name, 
or did you just make it up?" );

Once we’ve set a variable equal to the value returned by val(), we can use it wherever a variable representing a string will work, including HTML output, as shown in the following example.

Add A Little Dazzle

Most of the time, you probably aren’t going to want to place the user’s input in an alert box.  Typically, you’ll pass it to an application running on the server to be processed, and/or display it in the browser as HTML output:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#get_it").click(function(){
  var the_name = $("#i_am").val();
    $("#say_it_here").html("<p><font size='4'><b><font face='Georgia'>
You said that you're</font><i><font color='#FF0000' face='Comic Sans MS'>" + the_name + 
"</font></i><font face='Georgia'>.  <br>Is that really your name, 
or did you just make it up?</font></b></font></p>" );
  });
});
</script>
</head>
<body>
<p>Who are you?</p> 
<p><input type="text" id="i_am" ></p>
<button id="get_it">That's who I am!</button>
<p id="say_it_here"></p>
</body>
</html>

HTML And val()

There are just a couple of changes from the first version.  We added a blank line of HTML below the button, and gave it an ID (“say_it_here”).  As already described, we set the variable “the_name” equal to the val() output.  Then in place of the JavaScript alert() method, we used the jQuery html() method.  We set it to select the HTML element with the ID “#say_it_here” (our blank paragraph), and replace the content with the HTML inside the parentheses.

That HTML output is just the same text as we had in our original alert box, only formatted as size 4, bold, and Georgia, with the user’s name (also size 4 and bold) in red Comic Sans.  It will appear directly below the “That’s who I am!” button. Try it out in a browser window!

This is just a taste of what you can do with jQuery and JavaScript.  You can find out much more by taking some of the many excellent online classes in JavaScript, jQuery, and related subjects, such as web design, web development, and other web-related programming languages.