How to Change the Text of an HTML Button Using JQuery

This quick guide will show you how to change the text in any HTML button using JQuery.

This may seem simple enough from the surface but one has to take note that in HTML you have two different types of buttons that have the same visual look but are completely different from an HTML point of view.

Changing Value of HTML Button Using JQuery

The value of a button in HTML is retrieved as text and not the value attribute.

<button id="mybutton"> Button Text </button>

Button text can be changed using the JQuery code below:

<script type="text/javascript">
    $(function() {
        $("#mybutton").text("New Button Text");
    });
</script>

Changing Value of HTML Submit Input

The above example will not work for inputs of type submit for example:

<input id="mybutton" type="submit" value="Submit">

You can change the above Input button With JQuery in this manner:

<script type="text/javascript">
    $(function() {
        $("#mybutton").val("New Button Text");
    });
</script>

You can also use from JQuery 1.7+:

<script type="text/javascript">
    $(function() {
        $("#mybutton").prop("value", "New Button Text");
    });
</script>

Found this article interesting? Follow Brightwhiz on Facebook, Twitter, and YouTube to read and watch more content we post.