Retour à Forum de programmation

simulateur forme Javascript?

  • chibuki
  • Novice
  • Novice
  • No Avatar
  • Inscription: Oct 18, 2008
  • Messages: 22
  • Status: Offline

Message Novembre 5th, 2010, 6:00 pm

Quelqu'un peut-il me donner une façon simple de faire une calculatrice javascript, où si l'utilisateur d'écrire une entrée dans un champ de texte, il serait de calculer le résultat dans un autre domaine instantanément sans avoir besoin d'un bouton «Soumettre»?

Heres le modèle je suis venu avec

Code: [ Select ]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}
.itemcount {
    width: 50px;
    background-color: #ABB6C9;
}
.price {
    width: 35px;
    background-color: #FFFF66;
}
.totalprice {
    width: 65px;    
    background-color: #FB99AC;
}
.grandtotal {
    width: 100px;
    background-color: #CCCCCC;
}
input {
    height: 18px;
    margin-bottom: 2px;
}
-->
</style>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
 <label>Item 1</label>
 <input type="text" name="item1" id="item1" class="itemcount" /> x 5 = <input type="text" name="item1total" id="item1total" class="totalprice" />

 <br />
 <label>Item 2</label>
  <input type="text" name="item2" id="item2" class="itemcount" /> x 2 = <input type="text" name="item2total" id="item2total" class="totalprice"/>
 <br />
 <label>Item 3</label>
  <input type="text" name="item3" id="item3" class="itemcount" /> x <input type="text" name="item3multiply" id="item3multiply" class="price" /> = <input type="text" name="item3total" id="item3total" class="totalprice"/>

 <br />
 <label>Item 4</label>
  <input type="text" name="item4" id="item4" class="itemcount" /> x <input type="text" name="item4multiply" id="item4multiply" class="price" /> = <input type="text" name="item4total" id="item4total" class="totalprice"/>
 <br /><br />
  <label><strong>Grand Total:</strong> $
   <input type="text" name="grandtotal" id="grandtotal" class="grandtotal" />

 </label><br />
</form>
</body>
</html>
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Untitled Document</title>
  5. <style type="text/css">
  6. <!--
  7. body {
  8.     font-family: Arial, Helvetica, sans-serif;
  9.     font-size: 12px;
  10. }
  11. .itemcount {
  12.     width: 50px;
  13.     background-color: #ABB6C9;
  14. }
  15. .price {
  16.     width: 35px;
  17.     background-color: #FFFF66;
  18. }
  19. .totalprice {
  20.     width: 65px;    
  21.     background-color: #FB99AC;
  22. }
  23. .grandtotal {
  24.     width: 100px;
  25.     background-color: #CCCCCC;
  26. }
  27. input {
  28.     height: 18px;
  29.     margin-bottom: 2px;
  30. }
  31. -->
  32. </style>
  33. </head>
  35. <body>
  36. <form id="form1" name="form1" method="post" action="">
  37.  <label>Item 1</label>
  38.  <input type="text" name="item1" id="item1" class="itemcount" /> x 5 = <input type="text" name="item1total" id="item1total" class="totalprice" />
  40.  <br />
  41.  <label>Item 2</label>
  42.   <input type="text" name="item2" id="item2" class="itemcount" /> x 2 = <input type="text" name="item2total" id="item2total" class="totalprice"/>
  43.  <br />
  44.  <label>Item 3</label>
  45.   <input type="text" name="item3" id="item3" class="itemcount" /> x <input type="text" name="item3multiply" id="item3multiply" class="price" /> = <input type="text" name="item3total" id="item3total" class="totalprice"/>
  47.  <br />
  48.  <label>Item 4</label>
  49.   <input type="text" name="item4" id="item4" class="itemcount" /> x <input type="text" name="item4multiply" id="item4multiply" class="price" /> = <input type="text" name="item4total" id="item4total" class="totalprice"/>
  50.  <br /><br />
  51.   <label><strong>Grand Total:</strong> $
  52.    <input type="text" name="grandtotal" id="grandtotal" class="grandtotal" />
  54.  </label><br />
  55. </form>
  56. </body>
  57. </html>


La boîte bleue est l'endroit où l'utilisateur d'écrire le montant de l'élément. La boîte rouge et la zone de grand total doit afficher le résultat (il ne devrait probablement pas être montré dans un champ de texte).

Par exemple, si j'écris 4 dans le "Point 1" boîte, il serait alors multiplié par 5 et le résultat 20 (4 * 5 = 20) serait automatiquement sur la boîte rouge à côté de lui.

Pour le point 3, l'utilisateur aurait à écrire manuellement à quel point Point 3 serait multiplié par dans la case jaune.

En fin de compte, la case grand écran total serait la somme de tout dans la boîte rouge.

Serait-ce qui complique énormément à faire?

C'est le meilleur exemple que je peux obtenir:
ww w.l otsofco de.c om / demo / form-calcul
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Novembre 5th, 2010, 6:00 pm

  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Inscription: Fév 10, 2004
  • Messages: 13458
  • Loc: Florida
  • Status: Offline

Message Novembre 5th, 2010, 6:33 pm

Itll être un peu plus facile si vous emballer vos multiplicateurs statique dans un <span> IDD.

HTML Code: [ Select ]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
}
.itemcount {
   width: 50px;
   background-color: #ABB6C9;
}
.price {
   width: 35px;
   background-color: #FFFF66;
}
.totalprice {
   width: 65px;  
   background-color: #FB99AC;
}
.grandtotal {
   width: 100px;
   background-color: #CCCCCC;
}
input {
   height: 18px;
   margin-bottom: 2px;
}
-->
</style>
 
<script type="text/javascript">
window.onload = function()
{
   var inputs = document.getElementsByTagName('input');
   for(var i = 0; i < inputs.length; i++)
   {
      if(/^item\d+$/i.test(inputs[i].id))
      {
         inputs[i].onkeyup = function()
         {
            var multiply = document.getElementById(this.id + 'multiply');
            multiply = multiply.value ? multiply.value : multiply.firstChild.nodeValue;
            document.getElementById(this.id + 'total').value = Math.max(0, parseInt(this.value)) * Math.max(0, parseInt(multiply));
         }
      }
      else if(/^item\d+multiply$/i.test(inputs[i].id))
      {
         inputs[i].onkeyup = function()
         {
            var count = document.getElementById(this.id.replace('multiply', '')).value
            document.getElementById(this.id.replace('multiply', 'total')).value = Math.max(0, parseInt(this.value)) * Math.max(0, parseInt(count));
         }
      }
   }
}
</script>
 
</head>
 
<body>
<form id="form1" name="form1" method="post" action="">
  <label>Item 1</label>
  <input type="text" name="item1" id="item1" class="itemcount" /> x <span id="item1multiply">5</span> = <input type="text" name="item1total" id="item1total" class="totalprice" />
 
  <br />
  <label>Item 2</label>
    <input type="text" name="item2" id="item2" class="itemcount" /> x <span id="item2multiply">2</span> = <input type="text" name="item2total" id="item2total" class="totalprice"/>
  <br />
  <label>Item 3</label>
    <input type="text" name="item3" id="item3" class="itemcount" /> x <input type="text" name="item3multiply" id="item3multiply" class="price" /> = <input type="text" name="item3total" id="item3total" class="totalprice"/>
 
  <br />
  <label>Item 4</label>
    <input type="text" name="item4" id="item4" class="itemcount" /> x <input type="text" name="item4multiply" id="item4multiply" class="price" /> = <input type="text" name="item4total" id="item4total" class="totalprice"/>
  <br /><br />
   <label><strong>Grand Total:</strong> $
     <input type="text" name="grandtotal" id="grandtotal" class="grandtotal" />
 
  </label><br />
</form>
</body>
</html>
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Untitled Document</title>
  5. <style type="text/css">
  6. <!--
  7. body {
  8.    font-family: Arial, Helvetica, sans-serif;
  9.    font-size: 12px;
  10. }
  11. .itemcount {
  12.    width: 50px;
  13.    background-color: #ABB6C9;
  14. }
  15. .price {
  16.    width: 35px;
  17.    background-color: #FFFF66;
  18. }
  19. .totalprice {
  20.    width: 65px;  
  21.    background-color: #FB99AC;
  22. }
  23. .grandtotal {
  24.    width: 100px;
  25.    background-color: #CCCCCC;
  26. }
  27. input {
  28.    height: 18px;
  29.    margin-bottom: 2px;
  30. }
  31. -->
  32. </style>
  33.  
  34. <script type="text/javascript">
  35. window.onload = function()
  36. {
  37.    var inputs = document.getElementsByTagName('input');
  38.    for(var i = 0; i < inputs.length; i++)
  39.    {
  40.       if(/^item\d+$/i.test(inputs[i].id))
  41.       {
  42.          inputs[i].onkeyup = function()
  43.          {
  44.             var multiply = document.getElementById(this.id + 'multiply');
  45.             multiply = multiply.value ? multiply.value : multiply.firstChild.nodeValue;
  46.             document.getElementById(this.id + 'total').value = Math.max(0, parseInt(this.value)) * Math.max(0, parseInt(multiply));
  47.          }
  48.       }
  49.       else if(/^item\d+multiply$/i.test(inputs[i].id))
  50.       {
  51.          inputs[i].onkeyup = function()
  52.          {
  53.             var count = document.getElementById(this.id.replace('multiply', '')).value
  54.             document.getElementById(this.id.replace('multiply', 'total')).value = Math.max(0, parseInt(this.value)) * Math.max(0, parseInt(count));
  55.          }
  56.       }
  57.    }
  58. }
  59. </script>
  60.  
  61. </head>
  62.  
  63. <body>
  64. <form id="form1" name="form1" method="post" action="">
  65.   <label>Item 1</label>
  66.   <input type="text" name="item1" id="item1" class="itemcount" /> x <span id="item1multiply">5</span> = <input type="text" name="item1total" id="item1total" class="totalprice" />
  67.  
  68.   <br />
  69.   <label>Item 2</label>
  70.     <input type="text" name="item2" id="item2" class="itemcount" /> x <span id="item2multiply">2</span> = <input type="text" name="item2total" id="item2total" class="totalprice"/>
  71.   <br />
  72.   <label>Item 3</label>
  73.     <input type="text" name="item3" id="item3" class="itemcount" /> x <input type="text" name="item3multiply" id="item3multiply" class="price" /> = <input type="text" name="item3total" id="item3total" class="totalprice"/>
  74.  
  75.   <br />
  76.   <label>Item 4</label>
  77.     <input type="text" name="item4" id="item4" class="itemcount" /> x <input type="text" name="item4multiply" id="item4multiply" class="price" /> = <input type="text" name="item4total" id="item4total" class="totalprice"/>
  78.   <br /><br />
  79.    <label><strong>Grand Total:</strong> $
  80.      <input type="text" name="grandtotal" id="grandtotal" class="grandtotal" />
  81.  
  82.   </label><br />
  83. </form>
  84. </body>
  85. </html>
Strong with this one, the sudo is.
  • sajtosbeats
  • Born
  • Born
  • No Avatar
  • Inscription: Déc 04, 2010
  • Messages: 1
  • Status: Offline

Message Décembre 4th, 2010, 6:09 am

et comment puis-je obtenir le "GrandTotal" de ce script?

Page 1 sur 1

Afficher de l'information

  • Total des messages de ce sujet: 3 messages
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 111 invités
  • Vous ne pouvez pas poster de nouveaux sujets
  • Vous ne pouvez pas répondre aux sujets
  • Vous ne pouvez pas éditer vos messages
  • Vous ne pouvez pas supprimer vos messages
  • Vous ne pouvez pas joindre des fichiers
 
 

© 2011 Unmelted, LLC. Ozzu® est une marque déposée de Unmelted, LLC