user6485186 user6485186 - 5 months ago 7
CSS Question

Input will not fade away when I click the radio button

I am trying to write a html css js code. in one part of it I have a one group of radio buttons (including 2 items). I want this to happen: if I click the first radio, textbox1 appears, if I click the second one, textbox1 disappears and textbox2 appears and vice versa.

this scenario is happening when I click on one of them, but it is not working when I click the second one.

this is my html code:

<label>Which one do you want to enter?</label>
<br/>
<label>Budget:</label>
<input name = "submethod" id = "submethodbudget" type="radio" value = "bud"/>
<div id = "smethod" style="display:none">
<input type="text" name = "budgetsub">
</div>
<label>Number of Clicks per Month:</label>
<input name = "submethod" id= "submethodclicks" type="radio" value = "clckno"/>
<div id = "smethod2" style="display:none">
<input type="text" name = "clicksnosub">
</div>
<br/>


and this is my js :

<script type="text/javascript">
$("#submethodbudget").click(function() {
$("#smethod").show("300");
$('#smethod').css('display', ($(this).val() === 'bud') ? 'block':'none');
});
$("#submethodbudget").click(function() {
$("#smethod2").hide("300");
});
</script>

<script type="text/javascript">
$("#submethodclicks").click(function() {
$("#smethod2").show("300");
$('#smethod2').css('display', ($(this).val() === 'clckno') ? 'block':'none');
});
$("#submethodclicks").click(function() {
$("smethod").hide("300");
});
</script>


can you tell me what am i doing wrong?

Answer

change

$("smethod").hide("300"); 

to :

$("#smethod").hide("300");  

I edit your code :

<html>
    <head>
    </head>
    <body>
        <label>Which one do you want to enter?</label>
        <br/>
        <label>Budget:</label><input name = "submethod" id = "submethodbudget"  type="radio" value = "bud"/>
        <div id = "smethod" style="display:none">
            <input type="text" name = "budgetsub">
        </div>
         <label>Number of Clicks per Month:</label><input name = "submethod" id= "submethodclicks" type="radio" value = "clckno"/> 
         <div id = "smethod2" style="display:none">
              <input type="text" name = "clicksnosub">
          </div>
        <br>
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
         <script>
             $("#submethodbudget").click(function() {
                 $("#smethod").show("300");
                 $('#smethod').css('display', ($(this).val() === 'bud') ? 'block':'none');
                 $("#smethod2").hide("300"); 
             });

             $("#submethodclicks").click(function() {
                 $("#smethod2").show("300");
                 $('#smethod2').css('display', ($(this).val() === 'clckno') ? 'block':'none');
                 $("#smethod").hide("300"); 
             });
        </script>
    </body>
</html>