Categories : JQuery

When you need to change input value by id or class selector you can use the same code. When you click button you will be able to change input value.

Basic Example to change ( set ) any type of element text

$('css-selector').val('value to set');

Change input value text by input id selector

<!-- How to change input value in jquery by id -->
<input type="text" id="name" value="">
<button id="btn">Click</button>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function () {
        // when you click button then change input value
        $("#btn").click(function () {
            $("#name").val("Hello");
        });
    });
</script>

How to change input value text by css class name selector

<!-- How to change input value in jquery by class -->
<input type="text" class="name" value="">
<button class="btn">Click</button>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function () {
        // when you click button then change input value
        $(".btn").click(function () {
            $(".name").val("Hello");
        });
    });
</script>

How to change input value in jquery by name selector

<!-- How to change input value in jquery by name -->
<input type="text" name="name" value="">
<button name="btn">Click</button>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function () {
        // when you click button then change input value
        $("button[name='btn']").click(function () {
            $("input[name='name']").val("Hello");
        });
    });
</script>

How to change input value in jquery by tag name selector

<!-- How to change input value in jquery by tag name -->
<input type="text" value="">
<button>Click</button>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function () {
        // when you click button then change input value
        $("button").click(function () {
            $("input").val("Hello");
        });
    });
</script>

In this article I explained by examples How to set any type of element value text in jquery.

One response to “jQuery How to change input text value by id or class name – Set element value”

  1. […] you want to know How to change ( set ) input value text you can check this article […]

Leave a Reply

Your email address will not be published. Required fields are marked *