Managing Buttons with jQuery

Buttons are used throughout web interfaces for actions such as submitting data, opening panels, starting requests and changing application state. jQuery can attach events, read values, change labels and enable or disable buttons.

← Bootstrap 4 Buttons

Button HTML Top ↑

<button type="button" id="new_one" name="button1">
    My Button
</button>

Add a Click Event Top ↑

<input type="button" id="b1" value="Add">

$( "#b1" ).on( "click", function () {
    alert( "You clicked the button" );
});

See the dedicated jQuery click event tutorial.

Create a Bootstrap 4 button with the code generator →

Find Which Button Was Clicked Top ↑

Give a group of buttons the same class and unique IDs. One event handler can respond to all of them.

<button id="new_one1" class="my_button">My Button 1</button>
<button id="new_one2" class="my_button">My Button 2</button>
<button id="new_one3" class="my_button">My Button 3</button>

$( ".my_button" ).on( "click", function () {
    const id = this.id;
    alert( "Clicked button ID: " + id );
});

Enable or Disable a Button Top ↑

For boolean DOM properties such as disabled, use .prop().

$( "#b3" ).prop( "disabled", true );
$( "#b3" ).prop( "disabled", false );

<button type="button" id="disable_button">Disable</button>
<button type="button" id="enable_button">Enable</button>
<button type="button" id="b3">Target Button</button>

$( "#disable_button" ).on( "click", function () {
    $( "#b3" ).prop( "disabled", true );
});

$( "#enable_button" ).on( "click", function () {
    $( "#b3" ).prop( "disabled", false );
});

Read Whether a Button Is Disabled Top ↑

const isDisabled =
    $( "#b3" ).prop( "disabled" );

console.log( isDisabled );

Read the Value or Label of a Button Top ↑

An <input type="button"> stores its displayed text in the value property. A <button> element has text content and may also carry a separate value.

<button id="button_value" value="record_12">
    Open Record
</button>

$( "#button_value" ).on( "click", function () {
    const value = $( this ).val();
    const label = $( this ).text().trim();

    console.log( value, label );
});

Change Button Text or Value Top ↑

$( "#my_button" )
    .val( "record_25" )
    .text( "Updated Button" );

For <input type="button">, update the label with .val(). For <button>, update visible text with .text().

Demo: show server date/time on a button →

Toggle One Button between Two States Top ↑

$( "#b1_close_open" ).on( "click", function () {
    const isClosed =
        $( this ).val() === "Close All";

    $( this )
        .val( isClosed ? "Open All" : "Close All" )
        .text( isClosed ? "Open All" : "Close All" );
});

Bootstrap 4 Button Styles Top ↑

Bootstrap 4 uses classes such as btn-primary, btn-secondary, btn-success, btn-info, btn-warning, btn-danger, btn-light, btn-dark and btn-link.

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>

The old Bootstrap examples used btn-default and btn-xs; those are not Bootstrap 4 button classes. Use btn-secondary/btn-light and the supported btn-sm/btn-lg sizes instead.

Button Sizes Top ↑

<button type="button" class="btn btn-success btn-lg">Large</button>
<button type="button" class="btn btn-warning">Default size</button>
<button type="button" class="btn btn-danger btn-sm">Small</button>

Block-Level Button Top ↑

In Bootstrap 4, btn-block expands the button to the available width of its parent.

<button type="button"
        class="btn btn-info btn-lg btn-block">
    Block level button
</button>

Open the Bootstrap 4 Button Code Generator →

← Managing text boxes Listbox & jQuery →

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: