Calculations in jQuery using keyup() and click()

Question

I am building my first app with jQuery mobile and one part of the app is the following :

http://jsfiddle.net/eriky/xBUK2/1/

Basically you input your value, and depending on which unit you specify, you have conversions made in two other units.

I have spent a lot of time trying to do this with different methods but can't make it work. I would also like that the value that appears in the first field before the user enter its own is the value of another field (not present) on this page.

Could someone explain me what is wrong and what is the best way to do it? Would it be better to perform the calculations only when the concerned button is clicked ?

Here is my code :

$(document).ready(function(){       


$("#ex").on("keyup", function() {
var val = +this.value || 0;
var ghz1 = (2.99792458 * val * 10) ;
var nm1 = (ghz1 * Math.pow(10,9) * Math.pow((532 * Math.pow(10,-9)),2) /   (2.99792458*Math.pow(10,8)*Math.pow(10,-9)));
var cm1 = val / (2.99792458  * 10);
var nm2 = (val * Math.pow(10,9) * Math.pow((532 * Math.pow(10,-9)),2) / (2.99792458*Math.pow(10,8)*Math.pow(10,-9)));
var cm2 = (val / (2.99792458 * 10));
var ghz2 = 2.99792458 * val * 10;
$("#ghz1").val(ghz1.toFixed(2));
$("#nm1").val(nm1.toFixed(2));
$("#cm1").val(cm1.toFixed(2));
$("#nm2").val(nm2.toFixed(2));
$("#cm2").val(cm2.toFixed(2));   
$("#ghz2").val(ghz2.toFixed(2));

});

$('#one').click(function() {

$('#one1,#ghz1,#nm1').show(); 
$('#two2').hide();
$('#three3').hide();   
});

$('#two').click(function() {
$('#two2,#cm1,#nm1').show(); 
$('#one1').hide(); 
$('#three3').hide();
});

$('#three').click(function() {
$('#three3,#cm2,#ghz2').show(); 
$('#one1').hide(); 
$('#two2').hide();
});



});

Thanks a lot.

Answer 1

Your are using id selectors # but your elements don't have any id. For making them work without IDs you could use your selectors like this $('input[name="ex"]') .

Answer 2

You need IDs for your inputs, the # selector is by ID

<input id="ghz2" value="" name="ghz2" /

Fiddle: http://jsfiddle.net/xBUK2/2/

Answer 3

Check working code here on jsfiddle .

HTML:

<div data-role="page" class="page1">
    <div data-role="header" >
            <h1>Raman Toolbox</h1>

    </div>
    <div data-role="content" >
<h3> Bandwidth @ Excitation </h3>


    <div data-role="fieldcontain">
            <label for="ex">Bandwidth</label>
            <input type="text" name="ex"  id="ex" data-clear-btn="true">
    </div>

          <div data-role="controlgroup" data-type="horizontal">  
              <a href="" data-role="button" id="one";>cm-1</a>
            <a href="" data-role="button" id="two";>GHz</a>
            <a href="" data-role="button" id="three";>nm</a>
        </div> <!-- control group -->   



             <div data-role="fieldcontain">

        <div id="one1">    
        <label for="ghz1">Raman Shift (GHz)</label>
        <input type="text" name="ghz1" id="ghz1"  readonly>

        <label for="nm1">Raman Shift (nm)</label>
        <input type="text" name="nm1" id="nm1" readonly>  
        </div>

        <div id="two2">    
        <label for="cm1">Raman Shift (cm-1)</label>
        <input type="text" name="cm1" id="cm1" readonly>

        <label for="nm2">Raman Shift (nm)</label>
        <input type="text" name="nm2" id="nm2" readonly> 
        </div>

        <div id="three3">    
        <label for="cm2">Raman Shift (cm-1)</label>
        <input type="text" name="cm2" id="cm2" readonly>

        <label for="ghz2">Raman Shift (GHz)</label>
        <input type="text" name="ghz2" id="ghz2" readonly>  
        </div>   

</div>


</div>  <!-- content -->
</div>
 <!-- page -->

jQuery:

$(document).ready(function(){       

    $("#ex").on("keyup", function() {
      var val = +$(this).val() || 0;
     var ghz1 = (2.99792458 * val * 10) ;
        var nm1 = (ghz1 * Math.pow(10,9) * Math.pow((532 * Math.pow(10,-9)),2) /   (2.99792458*Math.pow(10,8)*Math.pow(10,-9)));
    var cm1 = val / (2.99792458  * 10);   
    var nm2 = (val * Math.pow(10,9) * Math.pow((532 * Math.pow(10,-9)),2) / (2.99792458*Math.pow(10,8)*Math.pow(10,-9)));
    var cm2 = (val / (2.99792458 * 10));
    var ghz2 = 2.99792458 * val * 10;
    $("#ghz1").val(ghz1.toFixed(2));
    $("#nm1").val(nm1.toFixed(2));
    $("#cm1").val(cm1.toFixed(2));
    $("#nm2").val(nm2.toFixed(2));
    $("#cm2").val(cm2.toFixed(2));   
    $("#ghz2").val(ghz2.toFixed(2));

    });

   $('#one').click(function() {

   $('#one1,#ghz1,#nm1').show(); 
   $('#two2').hide();
   $('#three3').hide();   
    });

    $('#two').click(function() {
   $('#two2,#cm1,#nm1').show(); 
   $('#one1').hide(); 
   $('#three3').hide();
    });

    $('#three').click(function() {
    $('#three3,#cm2,#ghz2').show(); 
    $('#one1').hide(); 
    $('#two2').hide();
    });

});

Just one tip: "name" and "id" attribute are not the same and you use "#" selector for id.