Enkel javascript utregning med data fra skjema

MirusMentis · 22. september 2011

Hepp.

Har drevet lenge med php/html/mysql men har hele tiden klart meg uten javascript.

Nå har jeg en case her hvor jeg trenger en utregning som må skje "realtime" i det man har fylt ut et skjema.

Det er snakk om registrering av målerstand for div målere.

F.eks vannmåler,strømmåler osv.

Jeg henter ut siste verdi og printer dette i skjemaet, så vil jeg at man skal få utregnet dagens forbruk umiddelbart i det man skifter fokus vekk fra feltet.

Tenkt eksempel. Gårsdagens vannmålerstand var 1050. Du taster dagens målerstand som er 1080. Da vil jeg at teksten "forbruk: 30 liter" skal vises.

Jeg har allerede fått et løsningsforslag på dette (link: http://jsfiddle.net/EjMsU/ ) Men jeg vet ikke hvordan jeg implementerer javascript/jquery koden inn i php filene mine :whistle:

Occi · 22. september 2011

Hei,

Tok meg tiden til å skrive hele scriptet for deg for å friske opp js-kunnskapene mine

Tatt utgangspunkt i jQuery, da det gjør det veldig mye deiligere å kode det. Dvs. du må selvsagt inkludere dette i head-biten din for at det skal fungere.

La også style rett i div her, bedre med en css, men det ordner du selv vettu

Har testet koden, og ved f. eks input 10 og 15 vil det gi 5 som forskjell.

HTML:

<form action="" method="post">
   <input type="text" name="input1">
   <input type="text" name="input2">
   <input type="submit" name="submit" value="regn ut" onclick="return regnUt()">
</form>

<div id="status" style="display: none;"></div>

JavaScript:

function regnUt()
{
   var status = $('#status');

   input1 = $('input[name$="input1"]').val();
   input2 = $('input[name$="input2"]').val();

   if(input1 != "" || input2 != "")
   {
       dagens = input2 - input1;        

       status.html("Forskjell fra input1 og input2: " + dagens);
       status.fadeIn("fast");
       return false;
   }
   else
   {
       status.html("Vennligst fyll inn alle tekstfeltene.");
       status.fadeIn("fast");
       return false;
   }
}

Endret 22. september 2011 av Occi

torbjørn marø · 22. september 2011

Tillater meg å foreslå et par endringer på Occi's løsning..

Dropp submit-knappen. I stedet legger du til følgende JavaScript som trigger funksjonen til Occi når input-feltet mister fokus (utestet):

$(function() {
   $('input[name$="input2"]').blur(regnUt);
});

Ellers går jeg ut ifra at forrige måling helst ikke skal være et input-felt. Da putter du det i f.eks. en SPAN med ID i stedet, og modifiserer regnUt litt for å hente ut verdien.

Occi · 22. september 2011

Var litt usikker på helt hvordan det var meningen at det skulle være, så bare skreiv et generelt script, er veldig lett å endre (om man kan lese javascript)

MirusMentis · 23. september 2011

Sorry for min uvitenhet, men jeg er fortsatt ikke helt sikker på hvor jeg skal legge javscript biten. I en egen fil, eller i <script type="text/javascript"> tags inline i <body> ?

Gårsdagens verdier har jeg i en <span> bak inputfeltene. Det er her snakk om 4-5 forskjellige verdier, så det er vel hensiktsmessig å lage funksjonen slik at den kan brukes omigjen, slik at jeg ikke trenger en funksjon for hver av inputfeltene.

edit:

Nå har jeg fått dette til å virke sånn halvveis. Dvs jeg fant ikke ut hvordan lage funksjonen slik at jeg kan bruke den på nytt, så nå har jeg en funksjon for hvert av feltene. Og jeg bruker også flere "status" div. Går det an å skrive dette på en bedre måte?

Når jeg kjører resultatet inn til status div`en så får jeg samtidig inn et linjeskift, som ødelegger skjemaet. Er det mulig å få til dette uten linjeskift?

Nå ligger en oppdatert versjon her:

http://jsfiddle.net/EjMsU/12/

Endret 23. september 2011 av semtex

torbjørn marø · 23. september 2011

Nå har jeg fått dette til å virke sånn halvveis. Dvs jeg fant ikke ut hvordan lage funksjonen slik at jeg kan bruke den på nytt, så nå har jeg en funksjon for hvert av feltene. Og jeg bruker også flere "status" div. Går det an å skrive dette på en bedre måte?

Jepp, her har jeg trukket ut en funksjon (regnUt) du kan gjenbruke. Har også ryddet litt:

function regnUt(input1, input2, status) {
   if(input1 != "" || input2 != "") {
       dagens = input1 - input2;        
       status.html("Forbruk: " + dagens);
   }
   else {
       status.html("Vennligst fyll inn alle tekstfeltene.");
   }
   status.fadeIn("fast");
}

function regnUtWater() {
   regnUt($('input[name$="input1"]').val(),
          $("#last-count").html(),
          $('#status'));
}

$(function() {
   $('input[name$="input1"]').blur(regnUtWater);
});

Når jeg kjører resultatet inn til status div`en så får jeg samtidig inn et linjeskift, som ødelegger skjemaet. Er det mulig å få til dette uten linjeskift?

Bare endre DIVen til å være en SPAN i stedet, så fungerer det som du ønsker.

Oppdatert versjon her: http://jsfiddle.net/EjMsU/13/

Oppdatering 2: Vi må unngå å forsøple det globale navnerommet. Her er enda en oppdatering: http://jsfiddle.net/EjMsU/14/

Endret 23. september 2011 av torbjørn marø

MirusMentis · 23. september 2011

Oppdatering 2: Vi må unngå å forsøple det globale navnerommet. Her er enda en oppdatering: http://jsfiddle.net/EjMsU/14/

Flotte greier dette. Det eksemplet på jsfiddel.net fungerer fint, men når jeg nå kopierer dette inn i filene mine så skjer det ingen ting når jeg skifter fokus fra feltet etter å ha fylt ut data.

Link til siden: http://gmx.no/strom/registrer.php

scriptet ser slik ut:

<script type="text/javascript">
$(function() {
   function regnUt(input1, input2, status) {
       if(input1 != "" || input2 != "") {
           dagens = input1 - input2;        
           status.html("Forbruk: " + dagens);
       }
       else {
           status.html("Vennligst fyll inn alle tekstfeltene.");
       }
       status.fadeIn("fast");
   }

   function regnUtTot() {
       regnUt($('input[name$="count_tot"]').val(),
              $("#last_totcount").html(),
              $('#totforbruk'));
   }

function regnUtUetg() {
       regnUt($('input[name$="count_uetg"]').val(),
              $("#last_uetgcount").html(),
              $('#uetgforbruk'));
   }

   $('input[name$="count_tot"]').blur(regnUtTot);
$('input[name$="count_uetg"]').blur(regnUtUetg);

});
</script>

og html ser slik ut:

<form action="#" method="post"> 
<label>Registrering av målerstand for </label><input style="font-weight:bolder;color:green" name=date type=text size=10 value="<?=$today_date ?>">. <br \>

<label>Målerstand totalt:</label> <input type="text" name="count_tot"> (i går:<span id="last_totcount"><?=$last_totcount ?></span>kWh -  <span id="totforbruk" style="display: none;"></span>)<br \> 
<label>Målerstand sokkel:</label> <input type="text" name="count_uetg"> (i går: <span id="last_uetgcount"><?=$last_uetgcount ?></span>kWh - <span id="uetgforbruk" style="display: none;"></span>)<br \> 
<label>Målerstand VV:</label> <input type="text" name="count_vv"> (i går:<span id="last_countvv"><?=$last_countvv ?></span>kWh)<br \> 
<label>Målerstand VP:</label> <input type="text" name="count_vp"> (i går:<span id="last_countvp"><?=$last_countvp ?></span>kWh)<br \> 
<label>Middel temp:</label> <input type="text" name="temp"><br \> 
<label>Kommentarfelt: </label><input type="text" name="comment"><br \> 
<label>Passord: </label><input type="password" size=30 name="password"><br \> 

<input type="hidden" name="last_totcount" value="<?=$last_totcount ?>">
<input type="hidden" name="last_uetgcount" value="<?=$last_uetgcount ?>">
<input type="hidden" name="last_countvv" value="<?=$last_countvv ?>">
<input type="hidden" name="last_countvp" value="<?=$last_countvp ?>">


<input type="submit" value="Registrer målerstand"> 

</form>

Jeg har kun lagt til dette på de to første feltene enn så lenge.

Er det noen enkel måte i javascript hvor jeg kan debugge ved å f.eks printe ut innhold i variablene fortløpene for å se hvor det evt er noe galt?

Endret 23. september 2011 av semtex

Occi · 23. september 2011

Firebug, Chrome Inspector og Opera Dragonfly har alle sammen debugging for javascript. Jeg har derimot ikke brukt de selv. Om ingenting skjer er det som oftest feil i javascriptet, sjekk ved enten å kjøre debug eller å legge inn f. eks alert("test"); random inn i koden for å se hvor den kommer hen.

MirusMentis · 23. september 2011

La inn en del alerts rundtomkring, men ingen ble vist.

Så jeg gikk tilbake til den versjonen fra torbjørn der han sitat: "forsøpler globalt navnerom" (uten at jeg vet hva det vil si) dvs jeg tok bort $(function() { i starten, og da kjørte tydeligvis scriptet da jeg nå fikk opp alertene, men ingenting skjedde når jeg fylte ut skjemaet.

Opera debuggeren gir meg en feil :

"Uncaught exception: ReferenceError: Undefined variable: $
Error thrown at line 3, column 0 in http://gmx.no/strom/registrer.php:
   $(function() {"

Endret 23. september 2011 av semtex

torbjørn marø · 24. september 2011

Forvirrende å holde denne diskusjonen på to forskjellige forum samtidig Men det funker nå, ikke sant?

MirusMentis · 24. september 2011

Føler meg litt schizofren ja.

Fungerer fint når jeg bare forstod at jquery må lastes opp i samme mappe som prosjektet mitt og inkluderes.

Som sagt, jeg har aldri skrevet så mye som èn linje JS før

Takk for hjelpen. Oppdaget en ny verden med jquery, så nå blir dette prosjektet "revampet"

Logg inn

Enkel javascript utregning med data fra skjema

Anbefalte innlegg

MirusMentis

Lenke til kommentar

Videoannonse

Occi

Lenke til kommentar

torbjørn marø

Lenke til kommentar

Occi

Lenke til kommentar

MirusMentis

Lenke til kommentar

torbjørn marø

Lenke til kommentar

MirusMentis

Lenke til kommentar

Occi

Lenke til kommentar

MirusMentis

Lenke til kommentar

torbjørn marø

Lenke til kommentar

MirusMentis

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer