Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="calculate values" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>  
  <form>
    <input type="text" name="amount" id="amount" placeholder=" Enter Amount ">
    <input type="radio" name="types" value="apple">Apple</input>
    <input type="radio" name="types" value="banana">Banana</input>
    <input type="radio" name="types" value="cookie">Cookie</input>
<input type="submit" value="Calculate">
    
  </form>
​
<div name="appleWorth" id="appleWorth" class="calc"></div>
<div name="bananaWorth" id="bananaWorth" class="calc"></div>
<div name="cookieWorth" id="cookieWorth" class="calc">
</div>
​
​
     
​
​
​
​
  
​
        
  
</body>
</html>
 
$(document).ready(function() {
  $( "form" ).on( "submit", function( event ) {
    event.preventDefault();  
    getVals();
    getSelected();
    
   });
  
  function getVals() {
    /**
    *get the val from the textfield. Check if empty
    *
    */
    var amount;
    amount = $('#amount').val().trim();
   
    if (amount === "") {
      console.log("Please Enter an Amount in Text Field");
    } else { 
      console.log(amount);
    }
    return amount;
  }
  
  
  function getSelected() {
    /**
    *get which radio is checked from radio collection
    */
    var selected;
    selected = $( "input:radio[name=types]:checked" ).val();
    
  
    if (selected === undefined) {
      console.log("Please select one of the radio buttons");
      //console.log(selected);
       
    } else {
      console.log("You selected a: " + " " + selected + " " + "which is worth " + selectedValue(selected));
    }
    selectedValue(selected);
     
    return selected;
  }
  
  function selectedValue (name) {
    /**
    * Use the checked value from radio to switch on and calculate 
    * values from that item appropraitely.
    *
    * TODO: Fix math in each switch.
    */
​
    
    var val,
        bananaVal,
        appleVal,
        cookieVal;
    
    bananaVal = 1;
    appleVal = 0.5;
    cookieVal = 0.021;
    
    switch ( name ) {
        
      case 'apple':
        $("#appleWorth").text("Apple is Worth: " + getVals() * appleVal);
        $("#bananaWorth").text("Banana is Worth: " + (getVals() * appleVal) / bananaVal);
        $("#cookieWorth").text("Cookie is Worth: " + (getVals() * appleVal) / cookieVal);
        
        break;
        
      case 'banana':
        $("#bananaWorth").text("Banana is Worth: " + getVals() * bananaVal);
        $("#appleWorth").text("Apple is Worth: " + getVals() * appleVal);
        $("#cookieWorth").text("Cookie is Worth: " + getVals() * cookieVal);
        
        break;
        
      case 'cookie':
        $("#cookieWorth").text(getVals() + " Cookie is Worth: " + getVals() * val)
        ;
        
        $("#bananaWorth").text("Banana is Worth: " + getVals() * bananaVal);
        $("#appleWorth").text("Apple is Worth: " + getVals() * appleVal);
        break;  
    }
    
    console.log('This is the return statment from switch ' + val);
    
    return val;  
    
  }
}); 
​
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers