Som besökare på Hamsterpaj samtycker du till användandet av s.k. cookies för att förbättra din upplevelse hos oss. Jag förstår, ta bort denna ruta!
Annons

Uppdatera inmatningsfält vid knapptryckning

Skapad av clark-kim, 2012-11-09 23:46 i Webbutveckling & Programmering

1 799
2 inlägg
1 poäng
clark-kim
Visningsbild
P 33 Luleå Hjälte 197 inlägg
0
Jag har ett formulär där användaren kan sätta in en siffra i ett inmatningsfält och se det totala i ett annat inmatningsfält. Det fungerar när man skriver in numren manuellt och jag vill att det ska fungera med knappar också, men jag kan bara inte få det att fungera.

Här är koden:

HTML
Ett stycke html-kod:
<form id="buyForm" method="post" acti>
<label>Choose quantity</label>
<div>
<a href="#" class="button">(+)increase</a>
<input type="text" id="qty1" name="qty[]"/>
<a href="#" class="button">(-)decrease</a>
</div>
<input type="text" id="cost1" value="50" visibility:hidden;" name="cost[]" />
<input type="text" id="price1" name="price[]" />
</form>


Js
Ett stycke javascript-kod:
// Calculate
function calc(idx) {
var price = parseFloat(document.getElementById("cost"+idx).value)*
parseFloat(document.getElementById("qty"+idx).value);
// alert(idx+":"+price);
document.getElementById("price"+idx).value= isNaN(price)?"0.00":price.toFixed(2);

}

window.onload=function() {
document.getElementsByName("qty[]")[0].onkeyup=function() {calc(1)};
document.getElementsByName("cost[]")[0].onkeyup=function() {calc(1)};
}


//Increase/decrease buttons
$(function() {

$(".button").click(function() {
var $button = $(this);
var oldValue = $button.parent().find("input").val();

if ($button.text() == "+") {
var newVal = parseFloat(oldValue) + 1;
// AJAX save would go here
} else {
// Don't allow decrementing below zero
if (oldValue >= 1) {
var newVal = parseFloat(oldValue) - 1;
// AJAX save would go here
}
}
$button.parent().find("input").val(newVal);
});

});


Här är det på jsfiddle: http://jsfiddle.net/rcheH/5/

Kan någon hjälpa mig med detta?

Tack på förhand!

Är reklamen ivägen? Logga in eller registrera dig så försvinner den!

Klas-Kenny
Visningsbild
P 31 Växjö Hjälte 12 128 inlägg
1
Jag orkar inte sitta och skriva ett script åt dig eller felsöka i ditt just nu, men börja med att kontrollera vad som körs genom att skriva in idiotsäker kod på lämpliga ställen.

Börja med att tex. direkt efter att du kollar om en knapp tryckts ner, kör där efter en alert('det fungerar så här långt'); så du vet att knapptrycket registreras, så går du vidare på det viset och hittar var det inte fungerar.

Tillägg av Klas-Kenny 2012-11-10 02:03

Jag orkade trots allt.

http://jsfiddle.net/rcheH/13/



Tillägg av Klas-Kenny 2012-11-10 02:08

http://jsfiddle.net/rcheH/16/

Där uppdaterar den sig automatiskt också.
Koden är lite ful, orkar inte fixa det då jag halvsover och är på laptop.



Tillägg av Klas-Kenny 2012-11-10 02:12

Insåg att det mesta var rätt, så det blev en upplaga till.
Här har du min "final" version:
http://jsfiddle.net/rcheH/17/

Om du inte inkluderat jQuery-biblioteket i ditt riktiga script så gör det, annars kommer det givetvis inte att fungera med jQuery-funktioner.

Rätt verktyg till rätt arbete - Makaroner äts med sked.


Forum » Datorer & IT » Webbutveckling & Programmering » Uppdatera inmatningsfält vid knapptryckning

Ansvariga ordningsvakter:

Användare som läser i den här tråden just nu

1 utloggad

Skriv ett nytt inlägg

Hej! Innan du skriver om ett potentiellt problem så vill vi påminna dig om att du faktiskt inte är ensam. Du är inte onormal och världen kommer inte att gå under, vi lovar! Så slappna av och gilla livet i några minuter - känns det fortfarande hemskt? Skriv gärna ner dina tankar och frågor, vi älskar att hjälpa just dig!

Den här tråden är äldre än Rojks drömtjej!

Det senaste inlägget i den här tråden skrevs för över tre månader sedan. Är du säker på att du vill återuppliva diskussionen? Har du något vettigt att tillföra eller passar din fråga i en ny tråd? Onödiga återupplivningar kommer att låsas så tänk efter en extra gång!

Hjälp

Det här är en hjälpruta

Här får du korta tips och förklaringar om forumet. Välj kapitel i rullningslisten här ovanför.

Rutan uppdateras automagiskt

När du använder funktioner i forumet så visas bra tips här.


Annons
Annons
Annons
Annons