Kosten weergeven (in javascript?)

Status
Niet open voor verdere reacties.

pro pizza

Gebruiker
Lid geworden
24 dec 2007
Berichten
454
Hallo,

Ik heb een vraagje, weet niet of in dit in javascript mogelijk is.
De vraag:
In een php bestandje heb ik een variabele met kosten. en een textfield waar iemand iets kan invoeren. Hoe kan ik nou de kosten laten zien als iemand iets intypt in het veld zonder dat hij dat veld post?

Dus stel de kosten staan op 10 (ofwel $kosten= 10;). en in het textveld vul ik 8 in: dan moet er onmiddelijk onder komen te staan "De kosten zijn 80."( dus zonder verder op een knop te drukken).

Heeft iemand hier een scriptje of tutorial voor?

Mvg, Ruben
 
Je kan 2 dingen doen: een is via 'AJAX' (google), de andere is nogal simpel:
PHP:
<input type='text' id='in' onkeydown="bereken();" />
<span id='out'>...</span>

<script>

function bereken()
{
   var out = document.getElementById('output');
   <?php echo "var kosten = " . $kosten . ";"; ?>
   var in = parseInt(document.getElementById('input').value, 10);

   out.innerHTML = "De prijs is " + (kosten * in) + " euro";
}

</script>



:thumb:
 
Heb je misschien ook een scriptje voor die van AJAX? want met deze lukt het mij niet.. Hij geeft alleen "..." weer.

Ruben
 
Yea, het was ook maar een uit-het-hoofd voorbeeldje. En de variabele-namen waren een beetje verkeerd maargoed. Hier een werkende test pagina:
PHP:
<?php

   $kosten = 8;

?>


<!doctype html>

<html lang='en'>

   <head>

      <meta charset='utf-8' />
      <title>test</title>

   </head>


   <body>



<input type='text' id='input' onkeydown="bereken();" />
<span id='output'>...</span>
 
<script>
 
function bereken()
{
   var out = document.getElementById('output');
   <?php echo "var kosten = " . $kosten . ";\n"; ?>
   var input = parseInt(document.getElementById('input').value, 10);
 
   out.innerHTML = "De prijs is " + (kosten * input) + " euro";
}
 
</script>


   </body>

</html>
 
Bedankt,:thumb: deze werkt op 1 ding na, er moet eerst op spatie of een andere toets worden gedrukt voordat hij de kosten weergeeft, anders komt er NaN te staan. Hoe kan dit worden verholpen? Dus dat er als er op1 gedrukt wordt meteen 8 komt te staan?:confused:

Ruben

** edit Ook als er niks ingevuld is staat er NaN, dit moet eigenlijk 0 worden
 
PHP:
<?php
 
   $kosten = 8;
 
?>
 
 
<!doctype html>
 
<html lang='en'>
 
   <head>
 
      <meta charset='utf-8' />
      <title>test</title>
 
   </head>
 
 
   <body>
 
 
 
<input type='text' id='input' onkeyup="bereken();" />
<span id='output'>...</span>
 
<script>
 
function bereken()
{
   var out = document.getElementById('output');
   <?php echo "var kosten = " . $kosten . ";\n"; ?>
   var input = parseInt(document.getElementById('input').value, 10) || 0;  // NaN fix

 
   out.innerHTML = "De prijs is " + (kosten * input) + " euro";
}
 
</script>
 
 
   </body>
 
</html>
onkeyup verhelpt het extra keypress, en || 0 fixt het NaN.
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan