please help with my jquery

jecommera
jecommera used Ask the Experts™
on
Hi,

The code below converts the div contents from cm to inch and visa versa.
How ever it does not work if someone keeps pressing the same radio button over and over.

Can someone advise how I can update my code to protect against this?

thanks

$(document).ready(function(){

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

      function convert(metric) {

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

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Multitechnician
Top Expert 2014
Commented:
add name to your radio, for example : metric
<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" name="metric" />
                  <label for="select_in">in</label>
                  <input type="radio" value="in" name="metrics" id="select_in" name="metric" />
            </form>
            
            
      </div>
      <div class="mnumber">
      20
      </div>
      
      <div class="mnumber">
      30
      </div>
</div>¿

Open in new window

and use :

$(document).ready(function(){

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

      function convert(metric) {

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

Open in new window

Author

Commented:
Hi

There is already a name on the radio called metrics
leakim971Multitechnician
Top Expert 2014

Commented:

Author

Commented:
that works - thank you

Can you please explain how it works when you add two names?
leakim971Multitechnician
Top Expert 2014

Commented:
with the same name radio button are exclusive and I replace click event by change event, the most important part I think
leakim has made a typo, DONT use the two names, just one...

i.e.

<input type="radio" value="cm" id="select_cm" name="metric" />
<input type="radio" value="in" id="select_in" name="metric" />

the key here was using the change event instead of the click event
leakim971Multitechnician
Top Expert 2014

Commented:
lol I did not see the first one...

I replaced click event by change event, the
most important part

Open in new window

I think

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