Trenger hjelp til simpel javascript matte

Sikkerhetsklarert

21. september 2011

Har et skjema, der man fyller inn div verdier som registreres i database, dette gjøre en gang om dagen.

Når skjemaet lastes så inneholder det ingen verdier, men bak hvert felt står gårsdagens verdi.

f.eks

Kode

<label>Vannmåler:</label> <input type="text" name="water_count"> (i går:8740)<br \>

Jeg kan desverre fint lite JS, så jeg forsøker å forklare dette så forenklet som mulig.

Det jeg vil nå er at med det samme dette input feltet er fylt ut, og man skifter fokus til neste felt, så vil jeg ha et javascript som regner ut differansen fra gårsdagens verdi og verdien som nettop er tastet inn.
Så om du fyller inn 8771 i dette skjemaet og trykker <tab> for å hoppe til neste felt så vil jeg at (8771 - 8740 = 31) teksten "31 liter vann" vises på siden. Helst på samme linje som aktuelt input felt.

Noen som kan hjelpe meg igang her?

marfo

390 44

21. september 2011

Slik?

Pjukern

Sikkerhetsklarert

Trådstarter

2.471 332

22. september 2011

Midt i blinken!

Alt jeg trenger er å legge til en unik id for hvert felt da?

Hmm hvordan legger jeg dette javascriptet inn i html koden. Skal det skrives inline eller legges i en egen .js fil?

tormaroe

codeslinger

492 455

22. september 2011

Sitat av marfo

Slik?

Vis hele sitatet...

jsfiddle.net var ikke dum gitt. Kvalitetspoeng!

ma10as

990 198

23. september 2011

Sitat av Pjukern

Alt jeg trenger er å legge til en unik id for hvert felt da?

Vis hele sitatet...

Det beste er å bruke klasser fremfor ID om du har flere felt som skal bruke samme script. Ta dette som et (fungerende) eksempel, som er bygget på marfos kode:

Kode

$(function(){
	
	// Lytter som følger med om en verdi endres
	$('.counter input[type="text"]').change(function(){
		var current   = $(this).parent().find('.current-count'),
			last_val  = parseInt($(this).parent().find('.last-count').html()),
			txt_count = $(this).val();
		
		current.html( (parseInt(txt_count) - last_val) + ' ' + current.attr('title') );
	});
	
});

.. med følgende markup

Kode

<p class="counter">
	<label>Vannmåler:</label>
	<input type="text" name="water_count">
	<span class="current-count" title="liter vann"></span> 
	(i går:<span class="last-count">8740</span>)
</p>

<p class="counter">
	<label>Strømmåler:</label>
	<input type="text" name="power_count">
	<span class="current-count" title="strøm"></span>
	(i går:<span class="last-count">8740</span>)
</p>

Sitat av Pjukern

Hmm hvordan legger jeg dette javascriptet inn i html koden. Skal det skrives inline eller legges i en egen .js fil?

Vis hele sitatet...

Det har ikke noe å si om du legger det som en ekstern fil eller inline i html-dokumentet. Det er benyttet jQuery (både mitt og marfos eksempel) så dette biblioteket må inkluderes før du legger ved koden over.

Pjukern

Sikkerhetsklarert

Trådstarter

2.471 332

23. september 2011

Hvordan inkluderer Jquery biblioteket da?

Jeg har kun brukt <script type=text/javascript></script> i html..

Uansett jeg har fått et eksempel fra tormaro (link: http://jsfiddle.net/EjMsU/14/ ) Når jeg 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:

Kode

<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:

Kode

<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>

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

Sist endret av Pjukern; 23. september 2011 kl. 12:46.

tormaroe

codeslinger

492 455

23. september 2011

Last ned jQuery-filen og inkluder følgende i filen din:

HTML-kode

<script src="jquery-1.6.4.min.js" type="text/javascript"></script>

PS: Du finner mange eksempler på dette på nettet..

Og Hvis du ikke har javascriptet ditt i html-filen så kan du droppe script-taggen:

HTML-kode

<script type="text/javascript">...</script>

Du må derimot inkludere javascriptfilen på samme måte som med jQuery.

dethklok

148 25

23. september 2011

Likte jsfiddle.net.
Får jeg endelig satt meg ned pusslet litt med jQuery på en ganske enkel måte og. Ikke minst fint med revisions!

Pjukern

Sikkerhetsklarert

Trådstarter

2.471 332

23. september 2011

Sweet, da er alt ok og fungerer som jeg ønsker.