Undvika flera klick på "Submit"

Ser gång på gång som som skriver "Klicka endast en gång" vid Submit-knappar. Visst, det är ett helvete ibland när folk klickar flera gånger. Här är ett tips:

Kod:

---

<input type="submit" value="Skicka" onclick="this.value='Skickar! Vänta...';this.disabled=true;return true">

---

Är Javascript inaktiverat så kommer onclick inte köras. Så egentligen är det inte fel att ha kvar "Klicka endast en gång" men det minimerar risken ytterligare. Nu måste man vara en av få som inte kör Javascript OCH analfabet för att det ska bli fel. =)

Det är så få som har javascript inaktiverat. De som har det är oftast medvetna om att de går miste om saker, de som inte är medvetna, de får skylla sig själva.

Ibland kan man ju nästan vara tvungen att använda javascript för vissa lösningar/förbättringar av upplevelsen/"säkerheten".

Citat:

---

Ursprungligen postat av seattlegrunge

Det är så få som har javascript inaktiverat. De som har det är oftast medvetna om att de går miste om saker, de som inte är medvetna, de får skylla sig själva.

---

.. fast tyvärr är några få tillräckligt för att förstöra. =(

Jag vet, men oftast är de som sagt medvetna om det... och ibland måste man se mellan fingrarna på dessa, för att få till någon sorts åtgärd, som t ex ditt exempel.

Offtopic: Har inte grunge dött ut än? ;)

Citat:

---

Ursprungligen postat av Marcin

Offtopic: Har inte grunge dött ut än? ;)

---

Grungen dör ALDRIG!!! :)
Så länge jag finns på denna jord så förblir grungen levande ;)

Kom att tänka på en sak som är lite farligt med ditt förslag Marcin.

Om man då skriver
onclick="this.disabled=true;return true"
på submit-knappen så stoppas även submit-processen efteråt. Detta gäller endast i IE.

Ojdå, det märkte jag inte. Bra att du skrev det.

Nu är jag ingen kodjeppe, men ändra utseende på knappen "platta till den och gör den vit" och gör den oklickbar när man har klickat på den en gång. Kanske går att göra med css? Precis som när utseendet på länkar byter utseende.

Edit: Lite kortare beskrivet - gör knappen disabled efter klick.

Citat:

---

Ursprungligen postat av Elvis

Nu är jag ingen kodjeppe, men ändra utseende på knappen "platta till den och gör den vit" och gör den oklickbar när man har klickat på den en gång. Kanske går att göra med css? Precis som när utseendet på länkar byter utseende.

---

Jadå, det går. Det viktigaste i sammanhanget är dock att man inte ska kunna submitta en ytterligare gång bara för att servern tar tid på sig.

Ändra css kan du göra med t.ex. onclick="this.style.backgroundColor='#ffffff';retu rn true;"

Notera här att javascript-referensen till CSS kan skilja sig lite och är skiftlägeskänslig ("case-sensitive").

"background-color" motsvaras av "backgroundColor" i javascript.

Citat:

---

Ursprungligen postat av Elvis

Nu är jag ingen kodjeppe, men ändra utseende på knappen "platta till den och gör den vit" och gör den oklickbar när man har klickat på den en gång. Kanske går att göra med css? Precis som när utseendet på länkar byter utseende.

---

Det hjälper tyvärr inte eftersom du bara ändrar knappens utseende då. Man måste på ett eller annat vis inaktivera knappen genom att sätta dess status till disabled.

Nu var det längesen jag skrev ett sånt fungerande script, men jag ska spana in mina gamla kodsnuttar från typ år 2000 där jag vet att jag applicerade det på några sajter. Återkommer med kod strax...

Men det går väl inte att submitta igen om knappen är oklickbar?

typ liknande: document.imp_login.loginButton.disabled = true;

Fast då är det ju det där med Javascript igen då iofs.

Citat:

---

Ursprungligen postat av Elvis

Men det går väl inte att submitta igen om knappen är oklickbar?

typ liknande: document.imp_login.loginButton.disabled = true;

Fast då är det ju det där med Javascript igen då iofs.

---

Ja, man blir tvungen att ladda om sidan och submitta igen. Det är det som är poängen för att undvika att folk klickar flera gånger på SUBMIT-bara för att de är otåliga.

Jag hittade inte mitt gamla script, men jag har för mig att jag skrev nåt i den här stilen... testade det lite snabbt nu och det verkar fungera i alla webbläsare.

Kod:

---

<form method="" action="" onsubmit="minKnapp.disabled = true; return true;">
<input type="submit" name="minKnapp" value="Klicka på knappen" />
</form>

---