Comment désactiver discrètement les boutons de soumission avec Javascript et Prototype?

Question

Donc, j'ai trouvé this recommandation, mais je n'arrive pas à comprendre comment.

C'est le code que je l'origine commencé par:

function greySubmits(e) { 
     var value = e.srcElement.defaultValue; 
     // This doesn't work, but it needs to 
     $(e).insert('<input type="hidden" name="commit" value="' + value + '" />'); 

     // This causes IE to not submit at all 
     $$("input[type='submit']").each(function(v) {v.disabled = true;}) 
    } 

    // This works fine 
    Event.observe(window, 'load', function() { 
    $$("input[type='submit']").each(function(e) { 
     Event.observe(e, 'click', greySubmits); 
    }); 
    }); 

Quoi qu'il en soit, je suis assez proche, mais je ne peux pas sembler aller plus loin.

Merci pour toute aide à tous!

Mise à jour: Désolé, je suppose que je n'étais pas tout à fait clair. Je souhaite désactiver tous les boutons de soumission lorsque quelqu'un clique sur un bouton de soumission. Mais je dois besoin d'envoyer le long de la valeur du bouton soumettre afin que le serveur sache sur quel bouton j'ai cliqué, d'où l'appel d'insertion. (Note: insert not crée un enfant de l'élément sur lequel vous l'appelez). Puis, après avoir désactivé les boutons de soumission, je dois appeler le formulaire contenant l'appel submit, car IE ne le soumettra pas après avoir désactivé le bouton. Cela a-t-il du sens?

Answer 1

J'ai finalement réussi à le faire fonctionner. Ryan a aidé alors je vais lui upvote :-) Voici le code:

function replaceSubmit(e) { 
    var el = e.element(); 
    Element.insert(el, { 'before': '<input type="hidden" name="' + el.name + '" value="' + el.value +'" />'}); 
    } 

    function greySubmits(e) { 
    // Don't disable the submit if the submit was stopped with a return(false) 
    if (e.returnValue) { 
     $$("input[type='submit']").each(function(v) {v.disabled = true;}) 
    } 
    } 

    function fixButtons() { 
    $$("input[type='submit']").each(function(v) { 
     if (Element.hasClassName(v, 'disabled')) { 
      v.disabled = true; 
     } else { 
      v.disabled = false; 
     } 
     }); 
    } 

    Event.observe(window, 'load', function() { 
     fixButtons(); 
     $$("input[type='submit']").each(function(e) { 
      Event.observe(e, 'click', replaceSubmit); 
     }); 
     $$("form").each(function(e) { 
      Event.observe(e, 'submit', greySubmits); 
     }); 
    }); 

Les fixButtons est de sorte que lorsque les gens cliquent sur le bouton de retour la page corrigera tous les boutons. Et si vous voulez désactiver un bouton et ne pas le réactiver sur le dos, vous lui donnez une classe de désactivée.

Answer 2

Vous devez faire exactement ce que la réponse dit:

« Ne désactivez pas le bouton dans sa « onclick », mais l'enregistrer, et de le faire dans le onsubmit forme. » Par conséquent, dans greySubmits(), conservez la ligne qui définit la valeur masquée, mais supprimez la ligne qui désactive tous les boutons d'envoi.

Ensuite, ajoutez un autre gestionnaire d'événement dans votre formulaire en ligne - à la forme, pas les boutons de soumission - qui fait la désactivation. Une autre option, que j'ai utilisée est de ne pas désactiver les soumissions mais d'échanger la visibilité entre deux éléments. Au clic, marquez les soumissions cachées, puis rendez visible un div ou un autre élément qui s'affiche comme "désactivé" à leur place.

Answer 3

Voici ce que j'ai trouvé, qui est adapté d'en haut. Correction de sorte qu'il détecte une propagation d'événement annulée en utilisant l'attribut stop de Prototype.

D'autres changements incluent l'utilisation de noms de variables plus longs (je deviens toujours confus quant à savoir si e est un événement ou un élément) et une fonction qui supprime les entrées de remplacement si la soumission de formulaire est annulée. Dans ma mise en œuvre, le fait de revenir sur le navigateur n'affiche pas la page telle qu'elle était lorsque l'utilisateur l'a quittée, elle semble à la place être récupérée (j'utilise Rails), donc j'ai également supprimé cette partie.

J'utilise des boutons plutôt que des entrées dans mon application de sorte que la partie a également changé.

function replaceSubmit(event) { 
    var element = event.element(); 
    Element.insert(element, { 'before': '<input type="hidden" name="' + element.name + '" value="' + element.value +'" class="button_replacement">'}); 
} 

function removeReplacementSubmits() { 
    $$('input.button_replacement').each(function(button) { 
     button.remove(); 
    }); 
} 

function greySubmits(event) { 
    // Don't disable the submit if the submit was stopped with a return(false) 
    if (event.stopped === true) { 
     removeReplacementSubmits(); 
    } else { 
     $$('button[type="submit"]').each(function(button) { 
      button.disabled = true; 
      button.innerHTML += '&#133;'; 
     }); 
    } 
} 

Event.observe(window, 'load', function() { 
    $$("button[type='submit']").each(function(element) { 
     Event.observe(element, 'click', replaceSubmit); 
    }); 
    $$("form").each(function(element) { 
     Event.observe(element, 'submit', greySubmits); 
    }); 
}); 

Answer 4

document.observe("dom:loaded", function(){ 
    $$('form').find(function(thisForm) { 
     Event.observe(thisForm, 'submit', function(event) { 
     $$('input[type="submit"]').find(function(input) { 
      input.value = 'Please wait ...'; 
      input.setAttribute('disabled',true); 
      }); 
     }); 
     });  
    });