please see what is wrong with my jquery code using radio button events to change html

jecommera
jecommera used Ask the Experts™
on
Hi,

Code as follows :

<form>
                  <label id="select_cm">cm</label>
                  <input type="radio" value="cm" name="metrics" id="select_cm" />
                  <label id="select_in">in</label>
                  <input type="radio" value="in" name="metrics" id="select_in" />
</form>

$(document).ready(function(){

       $("#select_cm").click(function() {
            convert('cm');            
      });
     
      $("#select_in").click(function() {
            convert('in');                  
      });
      });

      function convert(metric) {

            switch(metric){
                 case 'cm':
                      $('.mnumber').html(Math.round(parseInt($('.mnumber').text())*2.54)+" cm");
                      break;
                 case 'in':
                      $('.mnumber').html(Math.round(parseInt($('.mnumber').text())*0.39)+" in");
                      break;
            }
      }
      
thanks,
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
the id attribute in html must be unique (that means only one element can have any given id on the page).

your labels share the same ids as the inputs.

i think maybe you meant to set the "for" attribute instead, like so:

                  <label for="select_cm">cm</label>
                  <input type="radio" value="cm" name="metrics" id="select_cm" />
                  <label for="select_in">in</label>
                  <input type="radio" value="in" name="metrics" id="select_in" />
also, assuming mnumber is a text field you need to use "val", like so:

                 case 'cm':
                      $('.mnumber').val(Math.round(parseInt($('.mnumber').val())*2.54)+" cm");
                      break;
                 case 'in':
                      $('.mnumber').val(Math.round(parseInt($('.mnumber').val())*0.39)+" in");
                      break;

Author

Commented:
Hi,

Sorry still not working:

<html>
      <head>
            <title>Test</title>
      
       <script src="http://code.jquery.com/jquery-latest.js"></script>

      <script type="text/javascript">
      
$(document).ready(function(){

       $("#select_cm").click(function() {
            convert('cm');            
      });
     
      $("#select_in").click(function() {
            convert('in');                  
      });
      });

      function convert(metric) {

            switch(metric){
               case 'cm':
                      $('.mnumber').val(Math.round(parseInt($('.mnumber').val())*2.54)+" cm");
                      break;
                 case 'in':
                      $('.mnumber').val(Math.round(parseInt($('.mnumber').val())*0.39)+" in");
                      break;
            }
      }
      
      
      
      </script>
      
</head>


<body>
<div id="size_container">
      <div id="controls">
            <span>Select metric</span>
            <form>
                  <label for="select_cm">cm</label>
                  <input type="radio" value="cm" name="metrics" id="select_cm" />
                  <label for="select_in">in</label>
                  <input type="radio" value="in" name="metrics" id="select_in" />
            </form>
            
            
      </div>
      <div class="mnumber">
      20
      </div>
</div>
</body>
</html>
ahhh, yes don't change it to val (because it's a div not a text field)
or leave it as "val" and change the div to this:

<input type="text" readonly="readonly" value="20" class="mnumber"/>

Author

Commented:
Hi,

I tried the following but it does not work

<html>
      <head>
            <title>Test</title>
       
       <script src="http://code.jquery.com/jquery-latest.js"></script>

      <script type="text/javascript">
     
$(document).ready(function(){

       $("#select_cm").click(function() {
            convert('cm');            
      });
     
      $("#select_in").click(function() {
            convert('in');                  
      });
      });

      function convert(metric) {

            switch(metric){
               case 'cm':
                      $('.mnumber').html(Math.round(parseInt($('.mnumber'))*2.54)+" cm");
                      break;
                 case 'in':
                      $('.mnumber').html(Math.round(parseInt($('.mnumber'))*0.39)+" in");
                      break;
            }
      }
     
     
     
      </script>
     
</head>


<body>
<div id="size_container">
      <div id="controls">
            <span>Select metric</span>
            <form>
                  <label for="select_cm">cm</label>
                  <input type="radio" value="cm" name="metrics" id="select_cm" />
                  <label for="select_in">in</label>
                  <input type="radio" value="in" name="metrics" id="select_in" />
            </form>
           
           
      </div>
      <div class="mnumber">
      20
      </div>
</div>
</body>
</html>
that's cos you didn't put back your code properly... see the missing .text()?

Author

Commented:
hmmm... I tried changing to text so but still get a NAN

<html>
      <head>
            <title>Test</title>
       
       <script src="http://code.jquery.com/jquery-latest.js"></script>

      <script type="text/javascript">
     
$(document).ready(function(){

       $("#select_cm").click(function() {
            convert('cm');            
      });
     
      $("#select_in").click(function() {
            convert('in');                  
      });
      });

      function convert(metric) {

            switch(metric){
               case 'cm':
                      $('.mnumber').text(Math.round(parseInt($('.mnumber'))*2.54)+" cm");
                      break;
                 case 'in':
                      $('.mnumber').text(Math.round(parseInt($('.mnumber'))*0.39)+" in");
                      break;
            }
      }
     
     
     
      </script>
     
</head>


<body>
<div id="size_container">
      <div id="controls">
            <span>Select metric</span>
            <form>
                  <label for="select_cm">cm</label>
                  <input type="radio" value="cm" name="metrics" id="select_cm" />
                  <label for="select_in">in</label>
                  <input type="radio" value="in" name="metrics" id="select_in" />
            </form>
           
           
      </div>
      <div class="mnumber">
      20
      </div>
</div>
</body>
</html>
no my friend, wrong place. just use the original convert function you posted right up the top. the only thing wrong was the duplicate ids.

here it is, copied from your original post:


function convert(metric) {

            switch(metric){
                 case 'cm':
                      $('.mnumber').html(Math.round(parseInt($('.mnumber').text())*2.54)+" cm");
                      break;
                 case 'in':
                      $('.mnumber').html(Math.round(parseInt($('.mnumber').text())*0.39)+" in");
                      break;
            }
      }

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial