Bloknutie buttonu po odoslaní formuláru

Na mnohých stránkach, kde je potreba odoslať nejaký formulár ste si mohli všimnúť, že po jeho odoslaní sa submit button zablokoval (prípadne aj zmenil hodnotu na niečo typu: Processing…) a nešlo na neho viac krát kliknúť. Toto je dobré pri predchádzaní opakovaných postov, kedy užívateľ či už úmyselne, alebo nechtiac, odošle formulár viackrát, čo znamená opakované dáta v databáze.

Na prvý pohľad nič zložité.. Tiež som si to myslel, až kým som tento problém nepotreboval riešiť. Už nejaký ten čas aktívne pracujem na mojom redakčnom systéme, no až včera som si všimol, že mám občas v databáze viac rovnakých záznamov.

Otvoril som teda google a našiel som pár riešení, ktoré ale fungovali len polovične.. Teda buď:

1) zablokovalo submit button, ale formular neodoslalo (resp POST data nemali žiadnu hodnotu)

2) formulár odoslalo, ale submit button nezablokovalo

Tu je aspoň jeden nefunkčný príklad pre ilustráciu:

<input type=”submit” value=”Send” name=”send” onClick=”this.disabled=true; this.value=’Processing…’;document.forms[0].submit();”>

Button sa zablokuje, zmení názov na Processing…, formulár odošle, ale POST data nemajú žiadnu hodnotu.

Takýchto “hackov” som skúšal niekoľko vyše troch hodín, no žiaden nefungoval 100% a toto bolo snáď prvýkrát, čo som nevygooglil to, čo som chcel Nevadí vlastné riešenia sú aj tak najlepšie.

Riešenie:

Nasledujúci “hack” funguje perfektne, jediná nevýhoda je použitie javascriptu, ale inak by sa to aj tak spraviť nedalo.

<input type=”submit” name=”submit” value=”Send” onclick=”this.style.display=’none’; getElementById(’send’).style.display=’block’;” />
<input type=”button” value=”Processing…” style=”display : none;” disabled=”true” id=”send” />

Funguje to tak, že po kliknutí na button sa ten pôvodný schová a zobrazí sa druhý, už zablokovaný s inou hodnotou. Skúšal som to len na firefoxe, ale nevidím ani najmenší dôvod, prečo by to nemalo bežať aj na ostatných browseroch. Problém môže nastať len v opere, ktorá nedokáže posunúť nejaký element na miesto schovaného. Čize ak sa schová prvý button, ten druhý sa nezobrazí na jeho mieste, ale vedľa neho.