Change Button Text jQuery

Question

I'm having a strange issue where I'm unable to change the displayed text of a button using jQuery. The idea is to be able to toggle a field between password<=>text, with an associated button whose text switches between 'Show' and 'Hide'.

This is the button:

<input type="button" id="login-form-showchars" value="Show" onclick="showCharsClicked();"/>

And this is the showCharsClicked function:

function showCharsClicked() {
var passwordField = document.getElementById("login-form-password");
if (passwordField.type == "password") {
    passwordField.type = "text";
    //TODO: change text of button to 'Hide'
} //if
else {
    passwordField.type = "password";
    //TODO: change text of button to 'Show'
} //else
passwordField.value = value;
} //showCharsClicked

The function works, but no matter what code I insert into the TODO areas, the text on the button remains unchanged. I have tried ALL of the following with both 'input' and 'button' types:

document.getElementById('login-form-showchars').value = 'Hide';
$("#login-form-showchars").prop('value', 'Hide');
$("#login-form-showchars").html('Hide');
$("#login-form-showchars").attr('value', 'Hide');
$("#login-form-showchars").val('Hide');
$("#login-form-showchars").text('Hide');

Does anyone know what might be going wrong? By inspecting the button I see that its value IS changing, but this change is never reflected visually.

Thanks!

====================================

EDIT: I found a way to get it working and thought I would record it here for posterity. Thanks for all of your answers, I'm thinking now that the problem was caused because of the specific jQuery interface my program uses; that's why it worked for so many other people but not for me.

The problem was that the program created some nested 'span' tags underneath the button in runtime, so that during the program's execution it looked like this:

<a data-role="button" href="#" id="login-form-showchars" data-theme="v" class="ui-btn ui-btn-corner-all ui-shadow ui-btn-up-v" data-transition="pop" data-direction="reverse">
  <span class="ui-btn-inner ui-btn-corner-all">
     <span class="ui-btn-text">Hide</span>
  </span>
</a>

While I was trying to edit the button's value, what really needed changing was the text inside the button's 'span class="ui-btn-text"' tag.

I changed the button declaration to:

<a data-role="button" href="#" id="login-form-showchars">Show</a>

And the command inside the function to:

$("#login-form-showchars .ui-btn-text").text("Hide");

And this worked fine. Hope this helps someone not have to go through what I did!

It works for me (jsfiddle.net/eSU9v); perhaps this is a browser issue? What browser are you using? — Ethan Brown
– Ethan Brown, Commented May 16, 2012 at 17:15
First, what is value variable you assign to passwordField.value? Then, there is no need to change the value of passwordField to show/hide the password. — VisioN
– VisioN, Commented May 16, 2012 at 17:17

score 2 · Accepted Answer · 2012-05-16 17:32:53Z

2

It seems to work fine with your code using

document.getElementById('login-form-showchars').value = 'Hide'; document.getElementById('login-form-showchars').value = 'Show';

exact demo show/hide password + toggling button text to show/hide
source | demo

browser issue?

edited May 16, 2012 at 17:32

answered May 16, 2012 at 17:23

user753137

Sign up to request clarification or add additional context in comments.

2 Comments

Jesse M Over a year ago

I'm using Google Chrome, which is the (only) browser that my code is meant to work in. Though I've seen many successful jsFiddles using my code, it does not work within the actual program.

user753137 Over a year ago

Weird. Maybe worth to try <button>Show</button> instead of <input value="show" /> tag?

The System Restart · Accepted Answer · 2012-05-16 18:04:48Z

1

$('#login-form-showchars').on('click', function() {
  var target = $('#login-form-password'),
      $this = $(this);
  target.attr('type', function(i, oldType) {
     this.type = oldType == 'password' ? 'text' : 'password';
     $this.val(this.type == 'text' ? 'Hide' : 'Show');
  });
});

Working Demo

edited May 16, 2012 at 18:04

answered May 16, 2012 at 17:24

The System Restart

2,88121 silver badges28 bronze badges

2 Comments

The System Restart Over a year ago

@JesseM I added fiddle as proof. check that please

Jesse M Over a year ago

I understand that your code works, but when transplanted to my specific project it does not. I am using jQuery skins for the buttons; could this be causing issues?

KooiInc · Accepted Answer · 2012-05-16 18:20:20Z

0

Would this be what you want?

$('#login-form-showchars').click(
    function(e){
        var typ = $('#inp').attr('type');
        $('#inp')[0].type = typ === 'password' ? 'text' : 'password';
        this.value = (typ === 'password' ? 'Hide' : 'Show');
    }
);

See this jsfiddle

edited May 16, 2012 at 18:20

answered May 16, 2012 at 17:25

KooiInc

124k32 gold badges145 silver badges181 bronze badges

2 Comments

Jesse M Over a year ago

I'm sorry, I get an Uncaught SyntaxError: Unexpected Token ILLEGAL when I run this code.

KooiInc Over a year ago

Strange typo from jsfiddle keyboard quirks. It works again now.

Collectives™ on Stack Overflow

Change Button Text jQuery

====================================

3 Answers 3

2 Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

====================================

3 Answers 3

2 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related