jquery toggle button value

Question

In the below code when the play button is clicked Its value should be changed to pause and when pause is clicked the other function should be called .How to do this using jquery toggle

  <input type="button" onclick ="play" value="play"/>
   <script>
     function play()
     {
               play_int();
           //   Button value to be changed to pause
     }   

  And when pause play_pause();

Don't use inline event handlers. With jQuery it does not really make sense also. — kapa
– kapa, Commented Apr 18, 2011 at 11:34

Town · Accepted Answer · 2011-04-18 11:33:50Z

23

Give your button an ID:

<input type="button" id="play" value="play"/>

Then you can do something like this:

$('#play').click(function() {
   if ($(this).val() == "play") {
      $(this).val("pause");
      play_int();
   }
   else {
      $(this).val("play");
     play_pause();
   }
});

Or a slightly tidier version like this:

$(function(){
    $('#play').click(function() {
       // if the play button value is 'play', call the play function
       // otherwise call the pause function
       $(this).val() == "play" ? play_int() : play_pause();
    });
});

function play_int() {
    $('#play').val("pause");
    // do play
}

function play_pause() {
    $('#play').val("play");
    // do pause
}

Working demo

edited Apr 18, 2011 at 11:33

answered Apr 18, 2011 at 11:10

Town

14.9k3 gold badges50 silver badges72 bronze badges

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

Comments

xkeshav · Accepted Answer · 2013-07-05 10:21:54Z

14

try ( in jQuery < 1.9 )

$("input[type='button']").toggle(
    function(){
        $(this).val("Pause");
    }, 
    function(){
        $(this).val("Play");
    }
);

DEMO

Note: The toggle event was deprecated in 1.8 and removed in 1.9

edited Jul 5, 2013 at 10:21

answered Apr 18, 2011 at 11:14

xkeshav

54.2k47 gold badges183 silver badges256 bronze badges

3 Comments

Pierre de LESPINAY Over a year ago

Will this work with initial value ? I mean if the button is already set to Pause, will it toggle to Play ? I'm not sure.

Lakshmana Kumar Over a year ago

@diEcho its not working in jQuery 1.9 and above versions. Is there any other way to do like this?

xkeshav Over a year ago

@LakshmanaKumar The toggle event was deprecated in 1.8 and removed in 1.9 read : forum.jquery.com/topic/…

Muhamad Bhaa Asfour · Accepted Answer · 2011-04-18 11:30:55Z

2

$('#play_button_id').toggle(play,play_pause);

this will trigger the play() function when you click the button for the first time

and the play_pause() when you click the button for the second time

edited Apr 18, 2011 at 11:30

answered Apr 18, 2011 at 11:11

Muhamad Bhaa Asfour

1,0353 gold badges22 silver badges40 bronze badges

1 Comment

kapa Over a year ago

No, it won't. Unless these functions return with another function :). You should use toggle(play, play_pause).

Pierre de LESPINAY · Accepted Answer · 2012-07-26 11:41:26Z

2

I would say

statuses = ['Play', 'Pause'];
$('#btn_play').val(
    $('#btn_play').val() == statuses[0]
    ? statuses[1] : statuses[0]
);

answered Jul 26, 2012 at 11:41

Pierre de LESPINAY

46.5k62 gold badges222 silver badges318 bronze badges

Comments

Starx · Accepted Answer · 2011-04-18 11:11:04Z

1

A simplest idea can be this

function play(action) {
 { 
   if(action=='play') { 
      play_int(); 
      $("#btn_play").val('pause');
   }
   else { 
      pause_int(); 
      $("#btn_play").val('play');
   }
}

$("#btn_play").click(function() {
   val = $(this).val();
   play(val);
}

answered Apr 18, 2011 at 11:11

Starx

79.3k50 gold badges187 silver badges266 bronze badges

Collectives™ on Stack Overflow

jquery toggle button value

5 Answers 5

Comments

DEMO

3 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related