jQuery Form Interaction: AJAX Forms, Checkboxes, and Radio Buttons

A handful of jQuery form-interaction patterns — converting any form into an AJAX submission, reading a checkbox's checked state, getting a selected radio button's value, and running simple client-side validation — come up on nearly every traditional (non-SPA) form-heavy page.

Converting a normal form into an AJAX submission

    @csrf
    
    
    Send

$('#contact-form').submit(function (event) {
    event.preventDefault();

    $.ajax({
        url: $(this).attr('action'),
        method: $(this).attr('method'),
        data: $(this).serialize(),
        success: function (response) {
            alert('Message sent!');
        },
        error: function (xhr) {
            console.error(xhr.responseJSON.errors);
        }
    });
});

serialize() automatically collects every named field's current value into a URL-encoded query string — this single method call is what turns converting virtually any existing form into an AJAX submission into a genuinely small, generic change, rather than manually listing out every field name one by one.

Checking if a checkbox is checked

if ($('#agree-terms').is(':checked')) {
    // checkbox is checked
}

$('#agree-terms').change(function () {
    $('#submit-btn').prop('disabled', !this.checked);
});

is(':checked') is the standard jQuery pattern for reading a checkbox's current state — this.checked (a plain DOM property, accessible inside a jQuery event handler via the native this) is a slightly more direct equivalent when already inside a handler bound to that specific element.

Getting the value of a selected radio button

 Basic
 Pro

const selectedPlan = $('input[name="plan"]:checked').val();

The :checked selector, combined with the shared name attribute, is what correctly identifies which one of a group of radio buttons is currently selected — since only one radio button sharing a given name can be checked at a time by definition, this reliably returns exactly one value.

Simple client-side form validation before submission

$('#signup-form').submit(function (event) {
    let isValid = true;

    $(this).find('[required]').each(function () {
        if (!$(this).val().trim()) {
            isValid = false;
            $(this).addClass('is-invalid');
        } else {
            $(this).removeClass('is-invalid');
        }
    });

    if (!isValid) {
        event.preventDefault();
    }
});

Looping through every element with the native required HTML attribute (rather than hardcoding a list of field IDs) is a genuinely reusable pattern — the same validation logic works automatically for any form using the standard required attribute, without needing to update the validation code whenever a field is added or removed from the form.

Why this is a client-side convenience layer only

Every one of these checks — required fields, checkbox state — is purely a UX convenience that can always be bypassed by disabling JavaScript or sending a raw request directly; genuine enforcement always needs the equivalent server-side Laravel validation covered elsewhere on this site, regardless of how thorough the client-side checks are.