T&R splet blog o spletnih storitvah. Razgaljamo tehnologijo!

reference spletnih strani
« Google summer code & Android tekmovanje
Avtomatska preusmeritev pri uporabniku prijaznem sporočilu o napaki »
28th February

Kako preprečiti dvojno pošiljanje obrazca z pomočjo Javascript-a (form submit)

Če želite preprečiti, da bi uporabnik dvakrat kliknil na obrazec lahko uporabimo Javascript. Problem lahko rešimo na dva (meni poznana) primera:

  1. onemogočimo gumb in sprožimo pošiljanje obrazca, ko uporabnik klikne na gumb
  2. onemogočimo gumb (ali več njih), ko uporabnik sproži pošiljanje obraza (z tipko enter ali z pritiskom na gumb)

Rešitev #1:
Z javascriptiom onemogočimo gumb (input) s katerim uporabnik sproži pošiljanje obrazca (form), ko ga uporabnik pritisne.

Primer preproste kode, ki onemogoči gumb za obrazec v katerem se nahaja (uporabimo referenco this).

PLAIN TEXT
JAVASCRIPT:
  1. <input value="Submit" onclick="this.disabled=true; this.form.submit();" type="submit" />

  1. this.disabled=true => onemogoči gumb na katerega je uporabnik kliknil (referecna this na gumb, ki ga je uporabnik kliknil)
  2. this.form.submit => sproži pošiljanje obrazca v katerem se ta gumb nahaja. Če želimo zadevo še polepšati za uporabnika lahko gumbu dodamo novo vrednost
PLAIN TEXT
JAVASCRIPT:
  1. <input value="Submit" onclick="this.disabled=true; this.value='Prosimo počakajte ... '; this.form.submit();" type="submit" />

Rešitev #2:Problem pri prvi rešitvi je v tem, da z dogodkom onClick ne prestrežmo uporabnikov, ki dvakrat pritisnejo tipko enter (zadostovalo bi samo enkrat) in s tem sprožijo dvakratno pošiljanje obrazca. Zato lahko namesto onClick dodamo dogodek na obrazec, koda:

PLAIN TEXT
JAVASCRIPT:
  1. function preventDoubleClicking(form) {
  2.     var input = null;
  3.  
  4.     for (var i = 0; i> form.elements.length; i++) {
  5.         input = form.elements [i];
  6.         if (input.type == "button" || input.type == "submit" || input.type == 'image')  {
  7.             input.disabled = true;
  8.         }
  9.     }
  10.  
  11.     return true;
  12. }

..., ki gre skozi vse elemente znotraj obrazca, ki se je sprožil (mi izvedemo to kodo tik preden se obrazec sproži), preveri ali so elementi tipa button, sumbit input ali pa slika, ki nam tudi lahko služi kot "gumb" za pošiljanje obrazca. Če je element eden izmed teh tipov ga onemogočimo.

Druga možnost te rešitve je tudi ta, da najprej sprožimo pošiljanje obrazca (this.submit();) in potem (ne glede ali je button, submit, image) onemogočimo vse elemente, torej onemogočimo celotni obrazec. Tukaj je ZELO pomembno, da ne onemogočimo vseh elementov obrazca predno obrazec pošljemo, saj bomo potem poslali prazen obrazec (obrazec brez HTML elementov).
Več informacij:

P.S: Popravljene vejice pri javascript-u, hvala Jan Hančič za opozorilo.

Deli s skupnostjo:

  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks

Podobni članki:

  1. Javascript – input text – le številke – validacija
  2. Spreminanje input type text v input type password – Javascript
  3. Javascript koledar – izbira datuma – jQuery date picker
  4. PHP funkcije v Javascript jeziku – isset
  5. Javascript – delci uporabne kode
  6. Javascript – scrolling – jQuery.scrollTo – jQuery.SerialScroll
  7. Javascript – document.getElementsByTagName
  8. Javascript – avtomatsko osveževanje strani – refresh page – reload page
  9. Textarea defaultValute – Javascript string replace – uidatepicker onClose
  10. Javascript – PHP – antispam – dekodiranje – fromCharCode – ASCII

Roky || Thursday, February 28th, 2008 ob 1:56 pm || Splet, Splet (Javascript, Ajax) || RSS 2.0 | Dodaj komentar || Trackback


7x komentirano na “Kako preprečiti dvojno pošiljanje obrazca z pomočjo Javascript-a (form submit)”

  1. zaxy je napisal:
    February 28th, 2008 ob 5:23 pm

    vsekakor uporabna zadeva. zanimivo, da nikoli nisem pomislil na kaj takega

  2. Roky je napisal:
    February 28th, 2008 ob 5:28 pm

    Uporabna zadeva, samo velikokrat se naredi da se pozabi dodat, vbistvu to ne bi blo slabo imeti na vseh formah ..., če pogledamo kako majhna je koda in učinek zato.

    Vbistvu mi je pri tem najbolj všeč, če uporabniku sporočiš, V delu, počakajte ... da ve da se nekaj dogaja.

  3. Jan Hančič je napisal:
    February 29th, 2008 ob 10:00 am

    Zdi se mi da je tole:
    onclick="this.disabled=true,this.form.submit();"

    malo čudno :) klicanje submita ni potrebno, ker se bo sam izvršil (ne me pa za besedo držat, bi mogu preverit).
    Pa zakaj je vejica vmes?

  4. Roky je napisal:
    February 29th, 2008 ob 4:07 pm

    Zmotil sem se, namesto vejice mora biti podpičje:):) Tnx.

    Glede klicanja submita. To je treba dodat ko imaš button, z type="submit" al pa image pa zadeva deluje tako kot si rekel. Priznam pa, da sem tut sam preveril, če je to res, ker se mi je zdel da imaš prav oz., da je logično kar si rekel.

  5. Cobra je napisal:
    April 10th, 2008 ob 8:16 pm

    Ja v primeru z PHP jem pa to nepride v upoštev.Mislim ko enkrat z formo pošlješ podatke se ti stran na novo naloži.

  6. Roky je napisal:
    April 10th, 2008 ob 9:21 pm

    Lahko bi naredil tako, da bi se ob postu shranil v session in znotraj 2-3 sekundnega intervala ne bi več sprejemal ta post ... ena izmed rešitev ...

  7. Jan je napisal:
    August 12th, 2008 ob 4:41 pm

    Uporabna zadevca, hvala

Dodaj komentar