Auto submit form etter ingen taster er trykket på x sekunder

Datasmurfen · 27. oktober 2013

Hei,

Har noen gamle butikk-scannere som jeg sitter å leker litt med.

Spørsmålet mitt er hvordan skal jeg få formen til å automatisk submit etter X sekunder dersom noe har blitt skrevet/scanna inn? Vil helst ikke at submit knappen vises i det heletatt på skjermen.

Scriptet som står under kan sees her.

<html>
<html>
<body>

<!--  Fil som scriptet skal kalle på  !-->
<form action="check-status.php">

<!--  varenummer skal bli inputet fra EAN(Strekkode) scanner her. 
Autofocus taggen gjør at text field blir automatisk selectert når brukeren laster siden.
!-->
  varenummer: <input type="text" name="fname" autofocus><br>
<!--  Denne skal automatisk prossesere formen, helst uten submit knappen er synlig.  !--> 
 <input type="submit" value="Sender varnummer">
</form>
</body>
</html>

Endret 27. oktober 2013 av Datasmurfen

Thorbear · 27. oktober 2013

Dette løses med JavaScript.

Legg til name="foo" i form-taggen, så kan du legge til en JavaScript-snutt som følger:

setTimeout("document.foo.submit()", 10 * 1000);

Denne vil automatisk sende skjemaet til server etter 10 sekunder.

Datasmurfen · 27. oktober 2013

Finnes det noen mulighet for å ikke å sende , dersom det ikke har skrevet inn noen verdier?

Thorbear · 27. oktober 2013

if (document.getElementsByName("fname")[0].value != "") {
    setTimeout("document.foo.submit()", 10 * 1000);
}

Ut i fra det du beskriver er du kanskje egentlig interessert i at skjemaet automatisk blir sendt umiddelbart etter at scanneren fyller inn en verdi, for dette kan du kikke på "onchange". Om du ønsker å gjøre det ekstra avansert kan du også lytte på "onkeyup" slik at man må sende skjemaet manuelt om man har skrevet inn varenummer manuelt, men at det ellers går automatisk.

Datasmurfen · 27. oktober 2013

Mulig jeg har misforstått deg, men den siste endringen ser ikke ut til å virke?

<html>
<html>
<body>

<script>
if (document.getElementsByName("fname")[0].value != "") {
    setTimeout("document.foo.submit()", 10 * 1000);
}
</script>

<!--  Fil som scriptet skal kalle på  !-->
<form action="check-status.php "name="foo">

<!--  Varenummer  skal bli inputet fra EAN(Strekkode) scanner her. 
Autofocus taggen gjør at text field blir automatisk selectert når brukeren laster siden.
!-->
  Varenummer : <input type="text" name="fname" size="200" autofocus><br>
<!--    !--> 
 <input type="submit" value="Sender varenummer ">
</form>
</body>
</html>

Thorbear · 27. oktober 2013

Ah, selvfølgelig, jeg veit ikke helt hva jeg tenkte på der, var vel mest for å vise hvordan man kunne sjekke om et input-felt inneholdt noe tekst.

Om det er meningen at koden skal sjekke hver 10. sekund om det er noe i feltet, og sende skjemaet hvis det er noe der, så blir koden noe slikt:

function autoSubmit() {
    if (document.getElementsByName("fname")[0].value != "") {
        document.foo.submit();
    } else {
        setTimeout(autoSubmit, 10 * 1000);
    }
}

Også må denne funksjonen kalles én gang i det siden åpnes, f.eks:

<body onload="autoSubmit()">

Datasmurfen · 27. oktober 2013

Supert! Tusen takk, nå har jeg noe å leke med

Feh · 29. oktober 2013

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
$(document).ready(function() {
	$('#barcode_input').keypress(function() {
		if($(this).val() === "") {
			//ikke gjør noe så lenge inputet er tomt
		} else {
			setTimeout(function() {
				var barcode = $('#barcode_input').val();
				$.ajax({
					url: 'check_status.php',
					data: { barcode:barcode },
					type: 'get',
					success: function(output) {
						$('#output').html(output);
						$('#barcode_input').val('');
					}
				});
			}, 2000);
			
		}
	});
});
</script>

<!--  Fil som scriptet skal kalle på  !-->
<form id="barcode_form">

<!--  Varenummer  skal bli inputet fra EAN(Strekkode) scanner her. 
Autofocus taggen gjør at text field blir automatisk selectert når brukeren laster siden.
!-->
  Varenummer : <input type="text" name="barcode" id="barcode_input" size="200" autofocus><br>
<!--    !-->
</form>

<div id="output"></div>

check_status.php

<?php
	$barcode=$_GET['barcode'];
	
	//inkluder noe her, som f.eks spørring mot databse for å vise noe, eks. hent varedetaljer
	
	//later som vi finner varens informasjon, SELECT * FROM products WHERE barcode='$barcode', while($row= etc. etc.
	
	$product_name='Leverpostei';
	$price='12,90';
	$description='Deilig leverpostei som smaker like godt for store og små!';
?>
	<h2>Vare: <?php echo $product_name; ?></h2>
    <p>Pris: <?php echo $price; ?></p>
    <p>Varebeskrivelse: <?php echo $description; ?></p>

I et isolert script gjør det ingenting å binde onload events til body elementet, men generelt sett er det en "not recomended" practice. Det kan være nyttig dersom ting skal lastes inn så kjapt som mulig (i forhold til window/document ready), men bør unngås om mulig.

Script delen over bør selvsagt inkluderes mellom dokumentets <head> og </head> tager istedenfor i body.

Edit: Siden jeg først var så godt i gang lagde jeg en ajax versjon istedet, så slipper du å se at siden "postes" og formen resettes når resultatet er klart.

Endret 29. oktober 2013 av Feh

Logg inn

Auto submit form etter ingen taster er trykket på x sekunder

Anbefalte innlegg

Datasmurfen

Lenke til kommentar

Videoannonse

Thorbear

Lenke til kommentar

Datasmurfen

Lenke til kommentar

Thorbear

Lenke til kommentar

Datasmurfen

Lenke til kommentar

Thorbear

Lenke til kommentar

Datasmurfen

Lenke til kommentar

Feh

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Populær nå

Russlands invasjon av Ukraina [Ny tråd, les førstepost] 1 2 3 4 3090

Hvem er aktive 0 medlemmer