I've tried to call this function but it don't seem to work. Can anyone help me to see if what is wrong with my codes? Any help will be greatly appreciated.

This is my code for my radio button:

    <input type="radio" name="radioFrequency" onclick="myMth()" id="radioFrequency-0" value="Monthly (once a month)" />

This is my code for my dropdownlist

    <div class="control-group" <%--style="display:none;"--%>>
  <label class="control-label" for="ddlMth">Withdrawal Day</label>
  <div class="controls">
    <select id="ddlMth" name="ddlMth" class="input-large">
      <option>Select day</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
      <option>10</option>
      <option>11</option>
      <option>12</option>
      <option>13</option>
      <option>14</option>
      <option>15</option>
      <option>16</option>
      <option>17</option>
      <option>18</option>
      <option>19</option>
      <option>20</option>
      <option>21</option>
      <option>22</option>
      <option>23</option>
      <option>24</option>
      <option>25</option>
      <option>26</option>
      <option>27</option>
      <option>28</option>
      <option>29</option>
      <option>30</option>
      <option>31</option>
    </select>
  </div>
</div>

This is my js code to call the function:

<script>
        function myMth() {
            $("input[type='radio']").change(function() {

                if ($(this).val() == "Monthly (once a month)") {
                    $("#ddlMth").show();
                }
        else {
                    $("#ddlMth").hide();
        }
            });
            }

    </script>

I've tried to call this function but it don't seem to work. Can anyone help me to see if what is wrong with my codes? Any help will be greatly appreciated.

This is my code for my radio button:

    <input type="radio" name="radioFrequency" onclick="myMth()" id="radioFrequency-0" value="Monthly (once a month)" />

This is my code for my dropdownlist

    <div class="control-group" <%--style="display:none;"--%>>
  <label class="control-label" for="ddlMth">Withdrawal Day</label>
  <div class="controls">
    <select id="ddlMth" name="ddlMth" class="input-large">
      <option>Select day</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
      <option>10</option>
      <option>11</option>
      <option>12</option>
      <option>13</option>
      <option>14</option>
      <option>15</option>
      <option>16</option>
      <option>17</option>
      <option>18</option>
      <option>19</option>
      <option>20</option>
      <option>21</option>
      <option>22</option>
      <option>23</option>
      <option>24</option>
      <option>25</option>
      <option>26</option>
      <option>27</option>
      <option>28</option>
      <option>29</option>
      <option>30</option>
      <option>31</option>
    </select>
  </div>
</div>

This is my js code to call the function:

<script>
        function myMth() {
            $("input[type='radio']").change(function() {

                if ($(this).val() == "Monthly (once a month)") {
                    $("#ddlMth").show();
                }
        else {
                    $("#ddlMth").hide();
        }
            });
            }

    </script>

• javascript
• jquery
• html
• asp

Share Follow asked Jan 3, 2014 at 7:55 qU3stqU3st 9733 silver badges1515 bronze badges 4

• What is the problem with the code ? Could you please elaborate ? – Pradip Commented Jan 3, 2014 at 7:59
• Your radio button click calls myMth() which then registers the change event handler. – crad Commented Jan 3, 2014 at 8:00
• i set the function in the head of the page. I wanted to display the dropdownlist when i click on this radio button but when i click on the radio button the dropdownlist just do not appear – qU3st Commented Jan 3, 2014 at 8:00
• Did you got any error? please run IE browser for javascript error – Ramesh Rajendran Commented Jan 3, 2014 at 8:22

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

Try This Script.

$(document).on("change","#wrapper input[type='radio']",function(){
    if($(this).find("input[type='radio']").prop("checked")){
        //Your Code Here
    }
});

No need of of myMth() just use this:

<input type="radio" name="radioFrequency" id="radioFrequency-0" value="Monthly (once a month)" />

Script:

 $("input[type='radio']").change(function () {
            if ($(this).val() == "Monthly (once a month)") {
                $("#ddlMth").show();
            } else {
                $("#ddlMth").hide();
            }
        });

jsfiddle

Take out the onclick event, you are mixing javascript and jquery. You need something like this:

<script>
$( function ()
{
    $("input[type='radio']").change(function() {
        if ($(this).val() == "Monthly (once a month)") {
            $("#ddlMth").show();
        }
        else {
            $("#ddlMth").hide();
        }
     });
});
</script>

This will set up a handler that will fire every time that the radio button changes.

First of all you are using jQuery for displaying and hiding the div section. In your input element you have added onClick listener, which is the part of javascript. In your code you have used change method, which is the part of jQuery. So in effect you are using two listeners which is has no meaning at all.

So you can solve this issue in two way.

1) use onclick event in your input part and make a script for it

2) use click event of jquery(for this, you dont need to provide event listeners in input element)

note: click and change event has lot of changes in its working.

This is the javascript approach. You can achieve this in lot ways. This is only one method.this will trigger when you click on the radio button.

<input type="radio" name="input_name" onclick="myMyth()" />


<script>
function myMth()
{
    var parentDiv=document.getElementById("ddlMth").parentNode.parentNode;  //gets the div element with class 'control-label'
    var displayStatus=parentDiv.style.display;//gets the status of display element of div
   if(displayStatus=="none")
   {
      //if display="none" make it block. so that dropdown will appear
        parentDiv.style.display="block";
   }
   else
   {
       //if display="block" make it block. so that dropdown will disappear
       parentDiv.style.display="none";
   }
}

second approach is jquery for this, you dont need to specify any listeners in input element

 <input type="radio" name="input_name" />

Lot of jQuery solutions is available here. Use any one of those.