script om aantal te verhogen

[yammaski]

Dit scriptje werkte tot ik de "buttons" vervangde door "images".
Iemand een idee hoe dit aan te passen ?

[JS]<script type="text/javascript">
function subtractQty(){
if(document.getElementById("qty").value - 1 < 0)
return;
else
document.getElementById("qty").value--;
}
</script>[/JS]

		<form name="f1">
			<input name='qty' type='text' id='qty' value="0" />
		  	<input name='add' type='image' src="images/Aantal_Add.gif" onclick='javascript: document.getElementById("qty").value++;'/>
			<input name='subtract' type='image' src="images/Aantal_Min.gif" onclick='javascript: subtractQty();'/>
		</form>

 

[Naarling]

Input type images bestaat dan ook niet. Het zou helpden als je ons vertelde wat je precies probeert te bereiken.

 

[Supersnail]

@Naarling Input type image bestaat wel degelijk. Dat is hetzelfde als een input type submit, maar dan met de afbeelding van het src-attribuut i.p.v. een knop.

Dat is ook wat er mis gaat. Het script werkt, maar direct na het verhogen/verlagen van de waarde wordt het formulier verzonden, kom je op de zelfde pagina terug en krijg je dus weer de standaardwaarde (0) te zien.
Je kan dit op twee manieren oplossen. Je kan "gewone" images gebruiken i.p.v. input type image met deze onclick event handlers. De andere mogelijkheid is om "return false" toe te voegen aan de huidige "onclicks". Dat zorgt ervoor dat het formulier niet wordt verzonden:

<input name='add' type='image' src="images/Aantal_Add.gif" onclick='javascript: document.getElementById("qty").value++;return false'/>
<input name='subtract' type='image' src="images/Aantal_Min.gif" onclick='javascript: subtractQty();return false'/>

 

[yammaski]

Ik heb het opgelost met CSS.
Link model.

Nu zou ik de pijltjes nog achter het textveld willen hebben, maar dat is geen vraag voor dit forum.

Als je op een pijltje klikt blijft er een kadertje staan, hoe krijg je dat weg ?

 

[Naarling]

@Naarling Input type image bestaat wel degelijk. Dat is hetzelfde als een input type submit, maar dan met de afbeelding van het src-attribuut i.p.v. een knop.

weer wat geleerd.

 

[Supersnail]

Als je op een pijltje klikt blijft er een kadertje staan, hoe krijg je dat weg ?

Je kan "this.blur()" (zonder aanhalingstekens) achter de puntkomma van de onclicks zetten (vergelijkbaar met "return false" in mijn voorbeeld in bericht 3). Dat zorgt ervoor dat de focus niet meer op die input ligt.

@Naarling Het is een vrij onbekende optie. Ik ben hem zelf pas een paar maanden geleden tegengekomen.

 

[csshunter]

Nu zou ik de pijltjes nog achter het textveld willen hebben, maar dat is geen vraag voor dit forum.

Dan maar offtopic.
Iets van {display: inline-block} op de Add- en de Substract-input, en daar ook de background (plus bg-breedte en -hoogte) bij zetten?
(waarschijnlijk kunnen dan de <div>'s eromheen vervallen)