Change the caption of the button on click in JavaScript and jQuery

jQuery demo

The following code samples demonstrate how can you change the text of the existing controls at client side. The example change the text of a button ‘show image’ to ‘hide image’ after showing the image on the click event. You can see in the below demo:

Demo


The following code example is using the JavaScript to change the text of the button.

Example Code [JavaScript]

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Change the button caption at runtime</title>
    <script type="text/javascript">
        function changeText() {
            var txt = document.getElementById('btnclick').value;
            if (txt == 'Show Image') {
            document.getElementById("img").style.display = 'block';
                document.getElementById('btnclick').value = 'Hide Image';
                return false;
            }
            else if (txt == 'Hide Image') {
            document.getElementById("img").style.display = 'none';
            document.getElementById('btnclick').value = 'Show Image';
                return false;
            }
        }
      </script>
</head>
<body>
    <form id="form1">
    <div style="width:500px;height:220px;border:1px solid #bbb"> 
        <input type="button" id="btnclick" value="Show Image" onclick="changeText();"/><br />
        <img id="img" style="display:none;width:250px" alt="show an hide image"
         src="" /> </div>
    </form>
</body>
</html>

You can also use the jQuery to change the text of the existing input control by using the .val() method. The following code example is using the jQuery to change the text of the button.

Example Code [jQuery]

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Change the button caption at runtime</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#btnclick').click(function() {
                var txt = $('#btnclick').val()
                if (txt == 'Show Image') {
                    // Write the code for showing the image
                    $("#img").show();
                    $(this).val('Hide Image');
                    return false;
                }
                else if (txt == 'Hide Image') {
                // Write the code for hiding the image
                $("#img").hide();
                    $(this).val('Show Image');
                    return false;
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1">
    <div style="width:500px;height:220px;border:1px solid #bbb"> 
        <input type="button" id="btnclick" value="Show Image" /><br />
        <img id="img" style="display:none;width:250px" alt="show an hide image"
         src="https://lh4.googleusercontent.com/-frqiwakR_NY/UukVjdmxySI/AAAAAAAAALA/su621Uqmd0Y/s1089-fcrop64=1,00000000c901ddad/authorcode%2Bnew.png" />
    </div>
    </form>
</body>
</html>

You can also use the .attr() and .prop() jQuery methods like as:

$("#btnclick").prop('value', 'Hide image'); 
//versions newer than 1.6

Use the .attr rather than .prop if you are using the old version of jQuery.

$("#btnclick").attr('value', 'Hide image'); 
//versions older than 1.6