show/hide buttons on radio button click jquery

Question

I have 2 buttons and 2 radiobuttons

Buttons

1) btnErp

2) btngoogle

RadioButtons

1) rdiogoogle

2) rdioErp

If i click on rdiogoogle btngoogle should be visible and btnerp should be hide and if i click on rdioerp then btnerp should be visible and btngoogle should be hide

I did the following code but it is not working

Jquery

    <script>
        $(document).ready(function () {
            $("#btnerp").hide();
            $("#rdiogoogle").click(function () {
                $("#btngoogle").show();
                $("#btnerp").hide();
            });
            $("#rdioerp").click(function () {
                $("#btngoogle").hide();
                $("#btnerp").show();
            });
        });
    </script>


    **HTML**


  <div style="margin-top:20px;" class="spaceradio">
        <span>
            <input type="radio" id="rdiogoogle" name="logintype" value="Google Login" /><span style="font-weight:bold; font-size:17px; font-family:Verdana; margin-left:20px; color:black;">Google Login</span>
        </span>
    </div>
    <div style="margin-top:20px;" class="spaceradio spacer">
        <span>
            <input type="radio" id="rdioerp" name="logintype" value="ERP Login" /><span style="font-weight:bold; font-size:17px; font-family:Verdana; margin-left:20px; color:black;">ERP Login</span>
        </span>
    </div>
    <div class="imagediv" style="">

    <input id="btngoogle" type="image" src="~/Images/google-logo-new.png" alt="Google Login" width="100" height="34" class="btnspacer" />
    <input id="btnerp" type="button" class="btn btn-default btnspacererp" style="visibility:hidden;" width="200" height="34" value="Login" />
</div>

Answer 1

You need to use a different logic in your code, try this:

$(document).ready(function () {

     $("input[name=logintype]").change(function(){

        if($("#rdiogoogle").is(':checked')){
            $("#btgoogle").show();
            $("#btnerp").hide();
        }else if($("#rdioerp").is(':checked')){
            $("#btngoogle").hide();
            $("btnerp").show();
        }
    });
 });

Answer 2

Okay, tidied it up a little and made it work:

<script>
      $(document).ready(function() {
        $("#btnerp").hide();
        $("#rdiogoogle").click(function() {
          $("#btngoogle").show();
          $("#btnerp").hide();
        });
        $("#rdioerp").click(function() {
          $("#btngoogle").hide();
          $("#btnerp").show();
        });
      });

</script>
<div style="margin-top:20px;" class="spaceradio">
  <span>
            <input type="radio" id="rdiogoogle" name="logintype" value="Google Login" /><span style="font-weight:bold; font-size:17px; font-family:Verdana; margin-left:20px; color:black;">Google Login</span>
  </span>
</div>
<div style="margin-top:20px;" class="spaceradio spacer">
  <span>
            <input type="radio" id="rdioerp" name="logintype" value="ERP Login" /><span style="font-weight:bold; font-size:17px; font-family:Verdana; margin-left:20px; color:black;">ERP Login</span>
  </span>
</div>
<div class="imagediv" style="">

  <input id="btngoogle" type="button" alt="Google Login" width="100" height="34" class="btnspacer" value="BtnGoogle" />
  <input id="btnerp" type="button" class="btn btn-default btnspacererp" width="200" height="34" value="Login" />
</div>

Basically, you had a typo in your jQuery selector.

Answer 3

Please make sure you have write ids correctly while calling 'click' method on document.ready().You may use below code -

 $(document).ready(function () {

           $("#btnerp").hide();
            $("#btngoogle").hide();
            $("#rdiogoogle").click(function () {
                $("#btngoogle").show();
                $("#btnerp").hide();
            });
            $("#rdioerp").click(function () {
                $("#btngoogle").hide();
                $("#btnerp").show();
            });
        });

Answer 4

I hope you want something like this

      <script>
    $(function(){
    $('#btngoogle').hide();
    $('#btnerp').hide();

    $('#rdiogoogle').on('click',function(){

   $('#btngoogle').show();
   $('#btnerp').hide();
    });

    $('#rdioerp').on('click',function(){

    $('#btngoogle').hide();
    $('#btnerp').show();
     });

     });

    </script>

and also remove

style="visibility:hidden;"

because by jQuery you can keep hidden your button...so no need to add it in css