Forms

Form Events

$(function() {
    'use strict';
    $('#name2').on('click', nameClick);

    function nameClick() {
        $(this).css('background-color', 'blue');
    }

    $('#frmContact').on('submit', function(event) {
        // pevents the default submit action from happening
        event.preventDefault();
    });
});

Getting values from form

$('#id').val()

Get Attributes

$('a:first').attr('href')

Set Attributes

$('a:first').attr('href','contact.html')

CheckBoxes

Will Return True or False

$('#id').prop('checked');

Set the property

$('#id').prop('checked', true);

Set multiple properties using a object

$('#id').prop({'checked': true,
'disabled':false});

Radio Buttons

Return the value of which button is selected

$('[name=news]:checked').val();

Enabling and Disabling check boxes based on a single selection

If a certain box is checked then all will be enabled else all will be disabled

$(function() {
    'use strict';
    disableCheck(true);

    $('#bike_check').click(function() {
        if ($('#bike_check').prop('checked')) {
            disableCheck(false);
        } else {
            disableCheck(true);
        }
    });


    function disableCheck(status) {
        $('#backpack').prop('disabled', status);
        $('#calm').prop('disabled', status);
        $('#hotsprings').prop('disabled', status);
        $('#cycle').prop('disabled', status);
        $('#desert').prop('disabled', status);
        $('#kids').prop('disabled', status);
        $('#nature').prop('disabled', status);
        $('#snowboard').prop('disabled', status);
        $('#taste').prop('disabled', status);
    };

});

Sending the form to a different url based on a radio button selection

$('#newsletterYes').click(function() {
        $('#frmContact').attr('action', 'contact-submitted-nosub.htm');
    });

    $('#newsletterNo').click(function() {
        $('#frmContact').attr('action', 'contact-submitted.htm')
    });

---

Back To Top< — >Category< — > Home