jquery click to hide and show another button

Question

I have two buttons set as hidden :

<input type="button" id="a" style="display:none;" value="A" />
<input type="button" id="b" style="display:none;" value="B" />

I have a jquery where I check some conditions fetched from the database. Either one of the button will be shown and that depends on if the condition is 1 or 0..That means when I click any of the button it must get hidden and the other one must shown up..? But it's not happening..The button I click gets hidden and the other button isn't shown up..If anyone can help.. My jquery :

$(document).ready(function() {
        var condition = "<?php echo $condition; ?>"; //i get this from database
        var c = condition;


        if(c == 0){

                $('#a').css({'display':''});
            $('#a').click(function(){
            $('#a').hide();
            $('#b').show();

                  });   
        }else if(c == 1){

                $('#b').css({'display':''});
            $('#b').click(function(){
            $('#b').hide();
            $('#a').show();
        }
        });

try to log or alert the condition variable in JS.. Whats its value ? — Vedant Terkar
– Vedant Terkar, Commented Jul 29, 2013 at 16:33
@VedantTerkar it's value is not getting updated on button click on alert but getting updated on database.. — user2605321
– user2605321, Commented Jul 29, 2013 at 16:36

Sean · Accepted Answer · 2013-07-29 16:45:05Z

2

You need to move your .click(function(){}) outside of your if/else block, as condition/c never change, so the only the first .click(function(){}) works. The other one will never be called. This way, your hide/show is independent of the condition/c value.

$(document).ready(function() {
    var condition = <?php echo $condition; ?>; //i get this from database
    var c = condition;


    if(c == 0){

            $('#a').css({'display':''});   
    }else if(c == 1){

            $('#b').css({'display':''});
    }

        $('#a').click(function(){
              $('#a').hide();
              $('#b').show();
        });
        $('#b').click(function(){
              $('#b').hide();
              $('#a').show();
        });
    });

see this jsFiddle example - http://jsfiddle.net/bWJ5A/1/

edited Jul 29, 2013 at 16:45

answered Jul 29, 2013 at 16:38

Sean

12.4k3 gold badges31 silver badges49 bronze badges

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

Comments

Telvin Nguyen · Accepted Answer · 2013-07-29 16:35:01Z

1

var condition = "<?php echo $condition; ?>";

This should be modified to

var condition = <?php echo $condition; ?>;

You got a string, but you compared with a numeric.

answered Jul 29, 2013 at 16:35

Telvin Nguyen

3,5694 gold badges29 silver badges40 bronze badges

1 Comment

Sean Over a year ago

It looks like 1 == '1' is the same as 1 == 1 (stackoverflow.com/a/359547/689579), so either one is functional when using integers.

BlackLaw · Accepted Answer · 2013-07-29 16:50:14Z

code like this, at butB click; you haven't close with "});"

<html>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
var condition = 0; //i get this from database
    var c = condition;
    if(c == 0){
        $('#a').css({'display':''});
        $('#a').click(function(){
            $('#a').hide();
            $('#b').show();
        });   
    }else if(c == 1){
        $('#b').css({'display':''});
        $('#b').click(function(){
            $('#b').hide();
            $('#a').show();
        });
    }
    });
</script>
<body>
<input type="button" id="a" style="display:none;" value="A" />
<input type="button" id="b" style="display:none;" value="B" />
</body>
</html>

Collectives™ on Stack Overflow

jquery click to hide and show another button

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related