JQuery Logo

Inspecting And Reusing jQuery Events

19th July 2020 - 4 minutes read time

Adding events to HTML elements with jQuery is pretty simple, but I found that extending those events wasn't an easy task. I was faced with an issue where I had some third party code that performed an action on an element, and I needed to add an event and call the same handler from that event. As this was within a CMS I had limited scope to just add my new event to the existing code, so I needed a way of pulling out the current jQuery events and then calling that event handler separately. This post looks at how I accomplished this.

Let's start with a couple of simple form input elements.

<input type="text" class="field-text" />
<input type="text" class="field-next" />

As an example that can be useful here I'm going to set up a 'change' event that will copy the text entered into field-text into the field-next. This is a simple enough example and doesn't require that much code.

JQuery Logo

Prevent Enter Key Submitting Forms With JQuery

15th July 2011 - 2 minutes read time

A common practice that some users have is to press the enter key when they are filling in forms on the web. This might be when they are just moving to the next field, but the trouble is that this will submit the form.

To prevent this from happening you can simply stop the form being submitted if the enter key had been pressed. This is done by binding a JQuery event to the input elements of the form and returning false if the key pressed is enter, which has the keyCode value of 13. We also include a call to the JQuery method preventDefault() to stop the event propagating.

JQuery Logo

Enabling The Use Of delay() In Pre jQuery 1.4

24th January 2011 - 3 minutes read time

The other day I was trying to convert a HTML template into a CMS system and I found a stumbling block with the use of the jQuery function delay() in the template's JavaScript. During part of the templating process I found the following error occurring on the page.

JQuery Logo

How To Check And Uncheck A Checkbox With jQuery

27th July 2009 - 1 minute read time

To check and uncheck a checkbox using jQuery you first need to access the checkbox element using the $() function. Once you have done that you can retrieve or change the value of the checkbox quite easily.

To uncheck a checkbox use the following snippet, which makes nice use of the jQuery attribute filters:

$('input[name=mycheckbox]').attr('checked', false);

To check a checkbox use the following:

$('input[name=mycheckbox]').attr('checked', true);

To test if a checkbox is set or not use one of the following, both return true if checked and false is unchecked.

var checked = $('input[name=mycheckbox]').is(':checked');
var checked = $('input[name=mycheckbox]').attr('checked');