[Safari/JS] Form verzendt niet na javascript submit-button

[Svennetjee]

Hey,

ik loop tegen een vreemd probleempje van Safari:

ik wil dat een submit-button in een formulier eventjes gedisabled wordt na een klik, om zo dubbele submits te voorkomen. Ik gebruik jQuery, en mijn probleem was relatief eenvoudig op te lossen:

code:

$('#brdsubm').click(function() {
    $(this).attr('disabled', 'true');
    setTimeout('$("#brdsubm").removeAttr("disabled")', 1250);
});

Bovenstaande werkt prima. Als ik in Firefox of IE op de verzendknop klik, dan wordt de button netjes eventjes donker en wordt ik doorgestuurd naar een volgende pagina. In Safari doet echter alleen de button zijn kunstje, en wordt het formulier niet doorgestuurd naar de verwerkings pagina.

Iemand een idee hoe dat kan komen? Als ik bovenstaande javascript uitzet werkt alles wel goed, alleen wordt de button dan niet eventjes gedisabled..

[R4gnax]

Svennetjee schreef op zaterdag 13 maart 2010 @ 16:36:
Hey,

ik loop tegen een vreemd probleempje van Safari:

ik wil dat een submit-button in een formulier eventjes gedisabled wordt na een klik, om zo dubbele submits te voorkomen. Ik gebruik jQuery, en mijn probleem was relatief eenvoudig op te lossen:

code:

$('#brdsubm').click(function() {
    $(this).attr('disabled', 'true');
    setTimeout('$("#brdsubm").removeAttr("disabled")', 1250);
});

Bovenstaande werkt prima. Als ik in Firefox of IE op de verzendknop klik, dan wordt de button netjes eventjes donker en wordt ik doorgestuurd naar een volgende pagina. In Safari doet echter alleen de button zijn kunstje, en wordt het formulier niet doorgestuurd naar de verwerkings pagina.

Iemand een idee hoe dat kan komen? Als ik bovenstaande javascript uitzet werkt alles wel goed, alleen wordt de button dan niet eventjes gedisabled..

Je disabled de submit button waar de klik op plaats vindt nog voor het event afgelopen is en het browser default gedrag (de klik op de knop) plaats vindt. Webkit doet het eigenlijk goed: de submit button is disabled en reageert dus niet.

Probeer eens:

JavaScript:

$('#brdsubm').click(function() {
  var $btn = $(this);
  setTimeout(function(){
    $btn.attr("disabled" "true");
    setTimeout(function(){ $btn.removeAttr("disabled"); }, 1250);
  }, 10);
});

[Svennetjee]

Natuurlijk!
Hartstikke bedankt, het werkt nu!

[crisp]

R4gnax schreef op zaterdag 13 maart 2010 @ 17:46:
[...]
Webkit doet het eigenlijk goed: de submit button is disabled en reageert dus niet.

Nee, Webkit doet het volgens mij fout. HTML4 en de DOM specificaties zijn nogal vaag op dat punt, maar HTML5 is al wat explicieter wat 'disabled' precies inhoudt:

quote: http://www.w3.org/TR/html5/forms.html#concept-fe-disabled

A form control is disabled if its disabled attribute is set, or if it is a descendant of a fieldset element whose disabled attribute is set and is not a descendant of that fieldset element's first legend element child, if any.

A form control that is disabled must prevent any click events that are queued on the user interaction task source from being dispatched on the element.

Een disabled submit element moet dus 'queued' click events effectief negeren, maar in dit geval is er geen sprake van een queued event maar een event dat al afgehandeld wordt. Het 'disabled' maken van dat element zelf zou geen invloed mogen hebben op de afhandeling van het event zelf, dus de default action zou gewoon uitgevoerd moeten worden (het formulier submitten) tenzij preventDefault() nog wordt aangeroepen tijdens de afhandeling van het click-event. Wel speelt het 'disabled' attribuut dan een rol tijdens het bepalen van de 'successful controls' in de submit-fase.

Maar dat terzijde gebruikt de topicstarter imo gewoon het verkeerde event; deze behaviour kan je beter aan het onsubmit event van het formulier hangen ipv onclick op de button.

[R4gnax]

Was er zelf nog niet van op de hoogte dat de interpretatie van het disabled attribuut in de HTML5 drafts beter gedefinieerd is. Lijkt er op dat het dan inderdaad een bug in Safari of Webkit is, of dat het respectievelijke dev team óók nog niet van de strakkere definitie op de hoogte was.

Ben het trouwens met je eens dat een betere oplossing het gebruik van onSubmit is. Mijn suggestie was dan ook alleen bedoeld om even snel te kijken of het 'disabled' attribuut inderdaad de boesdoener was.