Advertisement
Guest User

Sumar Valores con JQuery [Ejemplo Sencillo] v2

a guest
Jul 6th, 2016
108
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 3.31 KB | None | 0 0
  1. <!-- need bootstrap CSS -->
  2. <!-- necesitas de el CSS de Bootstrap para que se vea muy bien :) -->
  3. <!-- http://www.jhcodes.com/ -->
  4. <!-- http://pilaresdelcodigo.wordpress.com -->
  5. <!-- Gif Example / GIF de Ejemplo -->
  6. <!-- http://pilaresdelcodigo.files.wordpress.com/2014/06/untitled.gif -->
  7. <!-- Post: https://pilaresdelcodigo.wordpress.com/2014/06/10/sumar-valores-con-jquery-ejemplo-sencillo/ -->
  8. <!DOCTYPE html>
  9. <html lang="en">
  10.   <head>
  11.     <meta charset="utf-8">
  12.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  13.     <meta name="viewport" content="width=device-width, initial-scale=1">
  14.     <title>Bootstrap 101 Template</title>
  15.  
  16.     <!-- Bootstrap -->
  17.     <link href="css/bootstrap.min.css" rel="stylesheet">
  18.  
  19.     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  20.     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  21.     <!--[if lt IE 9]>
  22.      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  23.      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  24.    <![endif]-->
  25.   </head>
  26.   <body>
  27.  
  28. <script>
  29. //Función que realiza la suma
  30. function Suma() {
  31.    var valor1 = document.valoresform.valor1.value;
  32.    var valor2 = document.valoresform.valor2.value;
  33.    try{
  34.        
  35.        if (valor2 >= 10){
  36.          alert(valor2);
  37.          return;
  38.        }
  39.        //Calculamos el número escrito:
  40.        valor2 = (isNaN(parseInt(valor2)))? 0 : parseInt(valor2);
  41.        fin = valor1*valor2;
  42.         $("#cambio").html("$" + fin + "");
  43.  
  44.    }
  45.    //Si se produce un error no hacemos nada
  46.    catch(e) {}
  47. }  
  48.  
  49. </script>
  50.  
  51. <br>
  52.  
  53.     <div class="container">
  54.     <div class="row">
  55.  
  56.      <form name="valoresform">
  57.  
  58.        <div class="col-md-4">
  59.             <div class="panel panel-info">
  60.                 <div class="panel-heading">
  61.                     <h4 class="text-center">
  62.                         Plan de Hosting</h4>
  63.                 </div>
  64.                 <div class="panel-body text-center">
  65.                     <p class="lead">
  66.                       <strong>Total a Pagar:</strong>
  67.                         <strong id="cambio">$0</strong></p>
  68.                 </div>
  69.                 <ul class="list-group list-group-flush text-center">
  70.                     <li class="list-group-item"><i class="icon-ok text-danger"></i>
  71.                         <h4>Costo por Año</h4>
  72.                         <input type="text" name="valor1" id="valor1"  value="1500" class="form-control" disabled>
  73.                     </li>
  74.                     <li class="list-group-item"><i class="icon-ok text-danger"></i>
  75.                         <h4>Años por Contratar</h4>
  76.                         <input type="number" min="1" max="10" name="valor2" id="valor2"  onclick="Suma()" value=""  class="form-control">
  77.                     </li>
  78.                 </ul>
  79.                 <div class="panel-footer">
  80.                 </div>
  81.             </div>
  82.         </div>
  83.    
  84.     </form>
  85.  
  86.      </div>  
  87.  
  88.     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  89.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  90.     <!-- Include all compiled plugins (below), or include individual files as needed -->
  91.     <script src="js/bootstrap.min.js"></script>
  92.   </body>
  93. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement