Sumar Valores con JQuery [Ejemplo Sencillo]

<!-- need bootstrap CSS -->
<!-- necesitas de el CSS de Bootstrap para que se vea muy bien :) -->
<!-- http://pilaresdelcodigo.wordpress.com -->
<!-- Gif Example / GIF de Ejemplo -->
<!-- http://pilaresdelcodigo.files.wordpress.com/2014/06/untitled.gif -->
<!-- Post: https://pilaresdelcodigo.wordpress.com/2014/06/10/sumar-valores-con-jquery-ejemplo-sencillo/ -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

<script>
//Función que realiza la suma
function Suma() {
   var valor1 = document.valoresform.valor1.value;
   var valor2 = document.valoresform.valor2.value;
   try{
      //Calculamos el número escrito:
       valor2 = (isNaN(parseInt(valor2)))? 0 : parseInt(valor2);
       fin = valor1*valor2;
        $("#cambio").html("$" + fin + "");

   }
   //Si se produce un error no hacemos nada
   catch(e) {}
}

</script>

<br>

    <div class="container">
    <div class="row">

     <form name="valoresform">

       <div class="col-md-4">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h4 class="text-center">
                        Plan de Hosting</h4>
                </div>
                <div class="panel-body text-center">
                    <p class="lead">
                      <strong>Total a Pagar:</strong>
                        <strong id="cambio">$0</strong></p>
                </div>
                <ul class="list-group list-group-flush text-center">
                    <li class="list-group-item"><i class="icon-ok text-danger"></i>
                        <h4>Costo por Año</h4>
                        <input type="text" name="valor1" id="valor1"  value="1500" class="form-control" disabled>
                    </li>
                    <li class="list-group-item"><i class="icon-ok text-danger"></i>
                        <h4>Años por Contratar</h4>
                        <input type="number" name="valor2" id="valor2"  onclick="Suma()" value=""  class="form-control">
                    </li>
                </ul>
                <div class="panel-footer">
                </div>
            </div>
        </div>

    </form>

     </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>