jQuery Text Box

Use jQuery .val() to read or set the value of a text box. Use .prop() for boolean properties such as disabled, and .on() for current event binding.

Read a Text Box Value Top ↑

const value = $( "#t1" ).val();

<input type="text" name="my_text" id="t1">
<button type="button" id="b1">Copy</button>
<div id="d1"></div>

$( "#b1" ).on( "click", function () {
    const value = $( "#t1" ).val();
    $( "#d1" ).text( value );
});

Show or Hide a Text Box Top ↑

$( "#t1" ).show();
$( "#t1" ).hide();

For animation details see show() and hide().

Enable or Disable a Text Box Top ↑

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

Boolean state belongs in .prop(), not .attr().

Enable a Text Box from a Checkbox Top ↑

$( "#t3" ).prop( "disabled", true );

$( "#ckb" ).on( "change", function () {
    $( "#t3" ).prop(
        "disabled",
        !$( this ).prop( "checked" )
    );
});

See jQuery checkbox handling.

Set or Clear the Value Top ↑

$( "#t4" ).val( "Default Data" );
$( "#t4" ).val( "" );

Focus and Select Text Top ↑

$( "#t1" ).trigger( "focus" );
$( "#text_id" ).trigger( "select" );

See focus events.

Read ID and Value from a Group of Text Boxes Top ↑

$( ".edit" ).on( "focus", function () {
    const id = this.id;
    const value = $( this ).val();

    $( "#display" ).text(
        "id: " + id + ", value: " + value
    );
});

Demo: group of text boxes with one handler →

Add or Remove Styles Top ↑

$( "#t1" ).css( "border-color", "red" );
$( "#t1" ).css( "background-color", "green" );

// Remove the inline values again.
$( "#t1" ).css({
    "border-color": "",
    "background-color": ""
});

Modern Validation Example Top ↑

The original video code combined focus, blur, minimum length, styling, copying the value and showing/hiding the input. The same learner purpose is preserved with current event binding:

$( "#t1" )
    .on( "focus", function () {
        $( "#display" ).text( "Enter your name" );
    })
    .on( "blur", function () {
        const value = $( this ).val().trim();

        if ( value.length < 3 ) {
            $( this ).css( "border-color", "red" );
            $( "#display" ).text(
                "Minimum length is 3"
            );
            return;
        }

        $( this ).css( "border-color", "green" );
        $( "#t2" ).val( value );
        $( this ).hide();
        $( "#display" ).text( "OK" );
    });

$( "#b1" ).on( "click", function () {
    $( "#t1" ).show().trigger( "focus" );
});

Textarea tutorial →

Additional Original Learning Routes Top ↑

These original tutorial/demo routes are retained so no useful learner path is lost:

• bs-textbox.php
• button.php
• event-click.php
• radio-button.php

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: