Javascript

Javascript – jQuery – Stopping Event Propagation – stopImmediatePropagation

0

Recently ran into another issue where I had two separate and de-coupled event handlers tied to the same dom element, specifically a form submit. However, the first event handler returned false if certain checkboxes were not checked (business rules), but the false was ignored by the second event handler, and still executed. After some searching I came across the jQuery stopImmediatePropagation function, which gave teeth back to the return false, by not executing any subsequent event handlers, and solved my issue.

Example:

$('#formId').submit(function(e) {

    var j=0;
    
    for(j; j<this.length; j++) {
        if (this[j].type === 'checkbox' && this[j].checked) {
            somethingSelected = true;
        }
    }

    if (!somethingSelected) {

        alert('Must select something to continue');
                
        e.stopImmediatePropagation();

        return false;
    }
            
    return true;
});

$('#formId').submit(function(e) {

    // If the previous event handler returned false, this event handler will not be executed
});

Javascript – jQuery – Property Submit of Object htmlformelement is not a Function

0

Recently ran into an issue while trying to add some jQuery logic to a form element, where the following error was being generated in the Javascript console every time I submitted the form: Uncaught TypeError: Property ‘submit’ of object # is not a function.

After some research, it was noted that there must be some other DOM element with the name or id of ‘submit’. So I viewed source and sure enough, found that the previous dev added the ‘name=”submit”‘ attribute to the “input” tag. After I changed the attribute to ‘name=”formButton”‘, everything worked as expected.

Javascript – JQuery – Google Analytics – Submit Form Using GET Instead of POST

0

Was working on adding Google Analytics cross domain tracking for a form which uses the GET (instead of POST) method. The problem I was running into was the Google Analytics Tracking Cookie (GATC) data was not being added to the url, because the form’s data was overriding Google’s data. And I couldn’t switch the GET to a POST due to some low level and multiple redirect issues which occurred within the actions script. So I did some Googling around and came across some code snippets which I ended up implementing for my final solution, and wanted to share with you, in case you run into the same issue.

$(document).ready(function() {
    $('#formId').submit(function(e) {

        try {

            e.preventDefault();

            var form = this;

            if (typeof _gat !== 'undefined') {

                _gaq.push(['_linkByPost', this]);

                var pageTracker = _gat._getTrackerByName();

                var url = pageTracker._getLinkerUrl(form.action);

                var match = url.match(/[^=&?]+\s*=\s*[^&#]*/g);

                for ( var i = match.length; i--; ) {

                    var spl = match[i].split("=");

                    var name = spl[0].replace("[]", "");

                    var value = spl[1];

                    $('<input>').attr({
                        type: 'hidden',
                        name: name,
                        value: value
                    }).appendTo(form);
                }
            }

            setTimeout(function() { form.submit(); }, 400);
        } catch (e) { form.submit(); }
    });
});

Notice, that with the above snippet we can localize the GATC values that Google was going to append to the URL via POST, then convert them into hidden fields, linked to the form being submitted. So when the form is submitted the hidden values, along with the form’s organic values will all now be part of the URL and available to the form action.

jQuery – Reverse Each

0

There may be some situations where you need to step through dom elements in reverse order, in this case the following code should help you:


jQuery(jQuery('div.child').get().reverse()).each(function(i) {

    //do stuff

});

Example html:


<div class="parent">

    <div class="child">A</div>

    <div class="child">B</div>

    <div class="child">C</div>

</div>

jQuery – Reset Select Options

3

If you need to reset select options try the following:


var select = jQuery('#someSelect');

select.val(jQuery('options:first', select).val());

Regardless of the first option being blank or not, this will reset the currently selected option to first option. In my opinion it’s always good practice to have a blank first option so the user can easily see it has been reset.

Javascript – JQuery – Check if Form Inputs were Selected

0

If you have a list of checkboxes or radio buttons and want to see if any of them were selected, JQuery makes it simple:

if (!(jQuery("input[@name=<input_name>]:checked").length)) {
    alert('Please select something!');
    return false;
}

return true;

Simply replace <input_name> with the name of your checkboxes/radio buttons. Calling code example:

<form action="someFile.php" method="post" onSubmit="return validateCheckboxes();">

    <input type="checkbox" id="checkbox_id_1" name="checkboxIds[]" value="1"/>
    <input type="checkbox" id="checkbox_id_2" name="checkboxIds[]" value="2"/>
    <input type="checkbox" id="checkbox_id_3" name="checkboxIds[]" value="3"/>
    

So the final javascript would like like:

function validateCheckboxes()
{
    if (!(jQuery("input[@name=checkboxIds]:checked").length)) {
        alert('Please select something!');
        return false;
    }
}
return true;

You can also use specific dom ids, but if you are iterating over a list and echoing out checkboxes/radio buttons I wouldn’t recommend it, as demonstrated above you can hook into multiple inputs by using name.

Go to Top