jQuery Id: Manipulating Objects Using the Id in Your HTML

jquery idjQuery is client-side code you can use after your web page loads in the user’s browser. jQuery is becoming increasingly popular for client-side manipulation. It’s supported by most browsers and lets you create fast sites that respond to user input.

New to jQuery? Take a course at Udemy.com.

Basic HTML DOM Structures

Each line of HTML represents an object. The DOM (document object model) is basically a structured model to represent the way HTML displays in the browser. If you’re familiar with HTML, you know that you need an “html” tag, then a “head” tag, a “body” tag and a closing tag for each of these elements. This is the structured DOM that you use to interface client-side code (jQuery) with your web pages.

To use jQuery, you need to include the jQuery libraries. JQuery is not a separate programming language. It’s actually a JavaScript library. If you’re familiar with JavaScript, jQuery will come easy for you. You need to add the following HTML script link to your web page code:

<script type='text/javascript' src='//code.jquery.com/jquery.min.js'></script>

Notice “http” is eliminated. Using just the “//” in your includes enables HTTP or HTTPS when incorporating files. The reason this is important is because linking an HTTP file in an HTTPS page will flag an error from the user’s browser that some part of the page is not encrypted. This is bad for user experience, so you want to avoid any issues between HTTP and HTTPS.

The Id Property

If you look at any web page’s source code, you’ll notice tags such as a text box, check box or button has the property “Id.” This Id must always be unique, because it represents that one object on the web page. If you accidentally duplicate your Id property with another element, your jQuery (and other client-side and server-side code) won’t be able to properly identify the tag. As a matter of fact, some languages will just take the first element in the DOM, so you will have buggy web pages.

Learn how to work with jQuery from the beginning with a course at Udemy.com.

You can set the Id dynamically in your server-side code. This is the typical way of defining the Id property. The “name” property is also used by most coders. These two properties are usually the same for each element, although the name property isn’t used much anymore.

The following code is an example of a button that has an Id of “mybutton1” property:

<button id=”mybutton1”> Submit Form </button>

The above code is basic HTML (4 or 5) with no styling, but the important part for this article is the “id” property. In this example, any time you reference “mybutton1,” it should reference this HTML element.

Using jQuery with the Id Property

Most of your elements should have an Id property set. With the Id, you can now use jQuery to reference and manipulate that specific DOM object. The following example changes the button’s text when the page loads in the browser:

$(‘#mybutton1’).text(‘ Submit Form Later ‘);

The hash indicates to jQuery that you’re using an Id identifier. You can use other methods to select a part of the DOM such as CSS class or parent and child elements. However, for this article, jQuery uses the Id property. Any time  you want to reference an HTML element using Id, you use the hash and then the Id value.

Because there are no functions surrounding this line of code, the button’s text will change when the page loads. Of course, you probably don’t want anything to happen until a user clicks a button or fills out a form. For instance, you might want to disable a button after the user clicks it once. This stops the user from accidentally submitting your form twice.

The following code disables a button after it’s been clicked once:

<script>

$('#mybutton1’).click(function(){

$('#mybutton1').attr("disabled", true);

});

</script>

First, the above code sets a function for the “click” event. JavaScript programmers will recognize this as the “onclick” event with older “input” objects that you set as buttons. The above code links a function to the click event, so it only fires when the user clicks a button.

Next, you have the jQuery line of code that does the disabling. The disable action is actually a property or attribute of the button. The “attr” method lets you manipulate these attributes. In this example, the “disable” attribute is set as “true.”

Obviously, if you disable a button, you need to enable it too. If your page works fine without any bugs, the form submits and you don’t need to enable the button. However, suppose the user wants to cancel the submission before the form processes, or something goes wrong and an error is returned. Your user needs to fix these issues and resubmit. If you leave the button disabled, the user won’t be able to resubmit the form, because the button is disabled. The only way the user can remedy the situation is to reload the web page. This is terribly frustrating, because the user has to re-enter all information into the form.

The solution is to offer a cancel button or re-enable the button on a form submission error. The following code shows you how to re-enable a button after the user clicks a “cancel” button:

$('#mycancel1’).click(function(){

$('#mybutton1').attr("disabled", false);

});

 

Notice the only difference is the “disabled” attribute is set to “false.” Notice the Id identifier is now “mycancel1” instead of “mybutton1.” Of course, if you use a “mycancel1” identifier, you need to have an element with the corresponding Id value. If you don’t, jQuery will return an error that the element doesn’t exist. If users have JavaScript errors turned on (in IE only), the browser shows an error. Other browsers show errors in sub-windows such as Chrome Developer Tools.

The Id property is a basic way to call and manipulate HTML items in your web pages. Remember, your user must support JavaScript to run jQuery, so always have alternative ways to work with pages if the user blocks JavaScript or uses an older browser. In most cases, you can display a message that your site only supports some browser versions. My recent browser versions support jQuery, so your pages are compatible with a majority of your users’ browsers.

Learn more about jQuery at Udemy.com.