jQuery button value

Question

I have a button ("#btnchangepass"), the value of the button is "show". If i click the button the value must change in "hide", if I click the button another time the value must change as it was at the beginning in "show".

I wrote this code, but i don't know how I can get back the beginning value of the button. Can someone give me a hand?

The button is not hide, it's just the value of the button, the name displayed on the button is hide and show.

$('#btnshowhide').click(function(){
    $("#btnshowhide").prop('value', 'hide');
});

You can't click an hidden element, so if you hide it you need to click another visible item to show it again. — michelem
– michelem, Commented Aug 13, 2015 at 8:41
@Michelem op want to change the value of button, not show and hide. — Norlihazmey Ghazali
– Norlihazmey Ghazali, Commented Aug 13, 2015 at 8:42
The button is not hide, it's just the value of the button, the name displayed on the button is hide and show — krusty
– krusty, Commented Aug 13, 2015 at 8:44

chiapa · Accepted Answer · 2015-08-13 08:58:15Z

1

You can check for its state and change the value accordingly:

$('#btnshowhide').click(function () {
    if ($("#btnshowhide").val() == 'show') {
        $("#btnshowhide").prop('value', 'hide');
    } else {
        $("#btnshowhide").prop('value', 'show');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="btnshowhide" value="show" />

Fiddle

edited Aug 13, 2015 at 8:58

answered Aug 13, 2015 at 8:41

chiapa

4,41811 gold badges73 silver badges108 bronze badges

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

2 Comments

krusty Over a year ago

Yess, you are the only one that really understood the question, thank you very much! :)

chiapa Over a year ago

I don't think I was the only one but hey, glad I could help

Praveen Kumar Purushothaman · Accepted Answer · 2015-08-13 08:39:17Z

1

If you are using jQuery < 1.8 use:

$('#btnshowhide').toggle(function () {
    $("#btnshowhide").attr('value', 'hide');
}, function () {
    $("#btnshowhide").attr('value', 'show');
});

Else, if you just wanna hide the button and show, use ternary operators:

$('#btnshowhide').click(function () {
    $(this).attr('value', $(this).attr('value') == 'hide' ? 'show' : 'hide');;
});

Use .attr() instead of .prop(), as the latter is used for mostly boolean stuff.

answered Aug 13, 2015 at 8:39

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Comments

Tahir Ahmed · Accepted Answer · 2015-08-13 08:52:27Z

1

$('#btnshowhide').click(function() {
  $(this).val($(this).val() === 'show' ? 'hide' : 'show');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" id="btnshowhide" value="show" />

answered Aug 13, 2015 at 8:52

Tahir Ahmed

5,7372 gold badges20 silver badges28 bronze badges

Comments

DGS · Accepted Answer · 2015-08-13 08:39:49Z

0

Use the following

$('#btnshowhide').click(function() {
  $(this).prop('value', $(this).prop('value') == 'hide' ? 'show' : 'hide');
  alert('This has val ' + $(this).prop('value'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnshowhide">button</button>

answered Aug 13, 2015 at 8:39

DGS

6,0251 gold badge23 silver badges37 bronze badges

Comments

Snake Eyes · Accepted Answer · 2015-08-13 08:40:53Z

0

I would suggest to use data attribute:

$('#btnshowhide').click(function(){
    var val = $(this).val();
    var newVal = "";

   if(val === "hide") {
      newVal = $(this).data("show-text");
   } else {
     newVal = $(this).data("hide-text");
   }

   $(this).val(newVal);
});

answered Aug 13, 2015 at 8:40

Snake Eyes

16.8k39 gold badges120 silver badges235 bronze badges

Comments

michelem · Accepted Answer · 2015-08-13 08:48:02Z

0

Just use hide()

$('#btnshowhide').click(function(){
    $(this).hide();
});

UPDATED:

Sorry I didn't understand, so you need something like this:

JSFiddle

HTML:

<input type="submit" value="hide" id="btnshowhide" />

JS:

$(document).ready(function () {
    $('#btnshowhide').click(function () {
        if ($(this).val() === "hide") {
            $(this).val("show");
        } else {
            $(this).val("hide");
        }
    });
});

edited Aug 13, 2015 at 8:48

answered Aug 13, 2015 at 8:39

michelem

14.6k5 gold badges55 silver badges67 bronze badges

2 Comments

Norlihazmey Ghazali Over a year ago

Changing button value, not hiding.

krusty Over a year ago

Thank you for your answer :)

Collectives™ on Stack Overflow

jQuery button value

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related