Trying to toggle text on a button in javascript

Question

I have a button in html

<input id="LockUnlock"
       type="submit" 
       class="btn-sm btn-primary" 
       value="@(agent.IsLockedOut ? "Unlock" : "Lock")"/>

It correctly sets the value based on the model but I want to toggle the button text when I click it.

My Javascript:

<script type="text/javascript">
        $('input[type = submit]').click(function () {
            if ($(this).text() === "Lock") 
            { 
                $(this).text("Unlock"); 
            } 
            else 
            { 
                $(this).text("Lock"); 
            }
        });
    </script>

Nothing happens when I click the button. I'm not seeing errors in the console window in Chrome.

Still doesnt work, even if I put an alert("foo"); in the function, it never shows. I think I'm doing something wrong that the method is never called. — Stuart, Oct 10 '17 at 10:30
[Difference between val() and text()](//stackoverflow.com/q/807867) — Tushar, Oct 10 '17 at 10:31
Where is the `script` included on page? In ``? You might need to wrap the JS code in `ready`. — Tushar, Oct 10 '17 at 10:31
remove the `;` from last from else `{ $(this).text("Lock"); };` — Sagar Jajoriya, Oct 10 '17 at 10:32
Try `$(document).ready(function() { $('#LockUnlock').click(function() { ...` — Tushar, Oct 10 '17 at 10:32
@Tusher, that made it work! using $(document).ready. Thanks, if you make it an answer I'll accept it. — Stuart, Oct 10 '17 at 10:35
@Stuart [My answer](https://stackoverflow.com/a/32558249/2025923) will help you. — Tushar, Oct 10 '17 at 10:35

score 1 · Answer 1 · answered Oct 10 '17 at 10:30

Use $(this).val() instead $(this).text().

Also, I fixed some code errors that you had in your question.

 $('input[type=submit]').click(function () {
            if ($(this).val() === "Lock") 
            { 
                $(this).val("Unlock"); 
            } 
            else 
            { 
                $(this).val("Lock"); 
            }; 
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="LockUnlock"
       type="submit" 
       class="btn-sm btn-primary" 
       value="Unlock"/>

Note: Check out this post to learn the differences between .text() and .val()

Read OP's comments on question. – Tushar Oct 10 '17 at 10:34 — Tushar, Oct 10 '17 at 10:34

score 0 · Answer 2 · answered Oct 10 '17 at 10:31

0

You can write this <input id="LockUnlock" type="submit" class="btn-sm btn-primary" value="@(agent.IsLockedOut ? 'Unlock' : 'Lock')"/>

answered Oct 10 '17 at 10:31

Jinesh

1,536
10
15

Trying to toggle text on a button in javascript

2 Answers2