Switch to different button on click

Question

I want code to switch the buttons. If I pressed button1 first time, it must show button2 and vice versa.

<input type="submit" value="asc" name="button1" id="but1">

<input type="submit" value="desc" name="button2" id="but3">

You are using `type="submit"` which will submit form. What exactly you want to acheive. — Satpal, Apr 16 '14 at 07:09
I want to change buttons for call acending and descinding query. — Piyush, Apr 16 '14 at 07:13

score 0 · Answer 1 · answered Apr 16 '14 at 07:12

0

Not sure what you're trying to achieve, but you can use:

$('input[type="submit"]').click(function() {
    $(this).hide().siblings('input[type="submit"]').show();   
});

Fiddle Demo

answered Apr 16 '14 at 07:12

Felix

37,892
8
43
55

Thank you this is what i want but it submit's form and reset to orignal button i don't understand how to do. i want to display asc and desc list on same button click. – Piyush Apr 16 '14 at 07:17
I don't get what you means. Could you rephrase your question? – Felix Apr 16 '14 at 07:18

score 0 · Answer 2 · edited Apr 16 '14 at 07:39

0

You can try the code below:

$('input[type="submit"]').click(function(){
   var valueOfButton = $(this).val();
   if(valueOfButton == 'asc')
     {
         $('input[value="asc"]').show();
       $('input[value="desc"]').hide();
     }
     else
    {  
         $('input[value="desc"]').show();
         $('input[value="asc"]').hide();
    }
});

edited Apr 16 '14 at 07:39

nbanic

1,270
1
8
11

answered Apr 16 '14 at 07:15

Bhushan Kawadkar

28,279
5
35
57

Antonio Ragagnin · Answer 3 · 2014-04-16T07:38:14.710

Try using the following functions:

$(element)click(callback) will handle the click of the element
$(element).show() will show the element
$(element).hide() will hide the element

so a semple code is:

//first hidden the second button
$('#but3').css('display','none')

// handle click of first button
$('#but1').click(function(){
    $(this).hide()
    $('#but3').show()
});

// handle click of second button
$('#but3').click(function(){
    $(this).hide()
    $('#but1').show()
});

Here is an example: http://jsfiddle.net/L7zux/1/

nbanic · Accepted Answer · 2014-04-16T07:37:55.157

One solution without the need for JQuery would be this one:

<input type="button" value="asc" name="button1" id="but1" onClick="document.getElementById('but3').style.display='';this.style.display='none';">

<input type="button" value="desc" name="button2" id="but3" style="display:none;" onClick="document.getElementById('but1').style.display='';this.style.display='none';">

You can also do it this way if you want to use the visibility:

<input type="button" value="asc" name="button1" id="but1" onClick="document.getElementById('but3').style.visibility='visible';this.style.visibility='hidden';">

<input type="button" value="desc" name="button2" id="but3" style="visibility:hidden;" onClick="document.getElementById('but1').style.visibility='visible';this.style.visibility='hidden';">

Using visibility preserves the buttons position. I changed the type from submit to button just out of demonstration reasons.

You can look at both JSFIDDLE demos of these solutions here and here.

Elvedin Hamzagic · Answer 5 · 2014-04-16T07:24:07.367

0

document.getElementById('but1').addEventListener('click', function() {
    document.getElementById('but1').style.visibility = 'hidden';
    document.getElementById('but3').style.visibility = 'visible'; }, false);

document.getElementById('but3').addEventListener('click', function() {
    document.getElementById('but3').style.visibility = 'hidden';
    document.getElementById('but1').style.visibility = 'visible'; }, false);

If you want to hide button and its placeholder completely, use style.display = 'none' and style.display = 'block'. If you put both buttons in div container with default static positioning, then both buttons will appear at the same position in container.

edited Apr 16 '14 at 07:24

answered Apr 16 '14 at 07:18

Elvedin Hamzagic

825
1
9
22

One of question tags is `jQuery`, Why use pure JS ?!! – frogatto Apr 16 '14 at 07:20
In IE 9 and above it works, in older IE should use attachEvent with `on` prefix to event name, but that's [different question](http://stackoverflow.com/questions/6927637/addeventlistener-in-internet-explorer) – Elvedin Hamzagic Apr 16 '14 at 07:35

score 0 · Answer 6 · edited Apr 16 '14 at 07:21

0

Simply Use .toggle() in jQuery

$('input[type="submit"]').click(function() {
   $('input[type="submit"]').toggle();
});

Fiddle

edited Apr 16 '14 at 07:21

frogatto

28,539
11
83
129

answered Apr 16 '14 at 07:20

Sudharsan S

15,336
3
31
49

score 0 · Answer 7 · answered Apr 16 '14 at 07:22

0

I'm betting your .toggle-radio-switch elements are siblings. Remove .parent() from your code. It isn't needed since .radio-switch-slider is contained directly in .toggle-radio-switch

$(this).find('.radio-switch-slider')

answered Apr 16 '14 at 07:22

Nayeem Mansoori

821
1
15
41

score 0 · Answer 8 · answered Apr 16 '14 at 07:24

By default when page will load put following code so that your second button will be hide.

$(document).ready(function(e){ $('#but3').hide(); });

After that Put code that were

$('input[type="submit"]').click(function() { $(this).hide().siblings('input[type="submit"]').show(); });

Switch to different button on click

8 Answers8