waarde berekenen en in form inputveld tonen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Gerrit broekhuis

gerrit broekhuis

02/02/2012 21:21:08
Quote Anchor link
Hoi,

Ik ben in mijn php pagina bezig met een form met o.a. 3 input regels:

KM-vertrek: <input type="text" name="KM1" />
KM-aankomst: <input type="text" name="KM2" />
KM-retour: <input type="text" name="KM3" />

Zodra KM1 en KM2 gevuld zijn moet KM3 alvast uitgerekend en getoond worden (KM3 = KM2 + (KM2-KM1)). Dit is immers de meest waarschijnlijke waarde en hoe minder invoerwerk, hoe gebruiksvriendelijker. Zonodig moet KM3 wel aangepast kunnen worden, dus het invoerveld moet wel beschikbaar en zichtbaar blijven.

Het gaat er niet om hoe ik KM1 enz. kan posten naar een PHP pagina, dat lukt allemaal prima. Maar hoe ververs ik de waarde van het KM3 veld met de berekende waarde?

Groeten, Gerrit
 
PHP hulp

PHP hulp

01/12/2020 13:12:40
 
Wouter J

Wouter J

02/02/2012 21:44:18
Quote Anchor link
Dit doe je met JavaScript. Een voorbeeldje: http://tinkerbin.com/jgOy4Bl0
 
Robin Van den Broeck

Robin Van den Broeck

02/02/2012 22:39:50
Quote Anchor link
Moet het automatisch gaan? Dat gaat niet via PHP omdat je dan eerst de pagina moet verzenden. (Dus via '<input type="submit" value="Verzenden" />)
 
Kris Peeters

Kris Peeters

03/02/2012 09:17:19
Quote Anchor link
Zoiets
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script>
      $(function() {
        $('#KM1, #KM2').change(setRetour);
        $('#KM1, #KM2').keyup(setRetour);
      });
      function setRetour(e) {  // wanneer een toets in
        var km1 = Number($('#KM1').val());
        var km2 = Number($('#KM2').val());
        if (isNaN(km1) ||  isNaN(km2)) {  // indien vertrek of aankomst geen nummer is => retour niet berekenen
          return true;
        }
        $('#KM3').val(km2 + (km2-km1));
      }
    </script>
  </head>
  <body>
    KM-vertrek:  <input type="text" id="KM1" name="KM1"/><br/>
    KM-aankomst: <input type="text" id="KM2" name="KM2"/><br/>
    KM-retour:   <input type="text" id="KM3" name="KM3"/><br/>
  </body>
</html>


Dit is javascript met jQuery. In dit geval is jQuery gehost door Google (kan je zelf aanpassen).
Gewijzigd op 03/02/2012 09:19:34 door Kris Peeters
 
Gerrit broekhuis

gerrit broekhuis

03/02/2012 09:45:02
Quote Anchor link
Wouter, Kris,

Dank voor jullie oplossingen. Ik zal kijken wat het beste past en kan hier zeker mee verder. jQuery heb ik ook al in gebruik voor een datum en tijdpicker.

Groeten, Gerrit
 
Kris Peeters

Kris Peeters

03/02/2012 10:19:30
Quote Anchor link
Wat die van Wouter betreft ...
Je moet dat wel initiëren als de pagina geladen is.

Dat kan bv. zo:

in je HTML:
<body onload="init()">

in javascript
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
function init() {
  // en dan hier de volledige javascript code van Wouter
}
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.