Comment puis-je désactiver temporairement un bouton pendant 3 secondes (onsubmit), puis de le ré-activer?

Je suis assez nouveau à l'aide de javascript et voici ce que j'ai à ce jour:

<!-- this is to disable the submit button and then re-enable it after 3 sec -->

<script type="text/javascript">

    function enable()
    {
    var x = document.LAYOUTFORM.getElementById("create_button");
    setTimeout(x.removeAttribute("disabled"), 3000);
    }

</script>

Et pour le bouton, j'ai ceci:

<INPUT TYPE="SUBMIT" VALUE=" Create PDF " class="FORMBUTTON" ID="create_button" onclick="javascript:this.disabled=true;javascript:enable();">

J'ai foiré avec cela pendant des heures et la plupart d'entre vous le regarder et de savoir quel est le problème immédiatement. Mon formulaire ID et le nom est LAYOUTFORM. Quelqu'un peut-il me dire ce que je fais de mal ici?

Pour les points de bonus je voudrais également que le texte du bouton pour modifier temporairement à "Créer..." alors qu'il est désactivé, et puis de nouveau à Créer un fichier PDF à nouveau.

setTimeout
C'est une belle idée! Je vous remercie.
AmazingChase s'il vous plaît accepter une réponse.

OriginalL'auteur AmazingChase | 2012-05-15

  1. 13

    Façon la plus simple:

    <input ... onclick="lockoutSubmit(this)">

    Dans votre javascript:

    function lockoutSubmit(button) {
    var oldValue = button.value;

    button.setAttribute('disabled', true);
    button.value = '...processing...';

    setTimeout(function(){
        button.value = oldValue;
        button.removeAttribute('disabled');
    }, 3000)
}
    génial.. Merci 🙂 j'ai été déconner setTimeout() 1er paramètre
    Ne pas soumettre à Google Chrome...

    OriginalL'auteur ninjagecko

  2. 0

    Baisse de la LAYOUTFORM entre le document et l'getElementById.

    Juste un avis, à l'aide de firebug, chrome developer tools, ou que ce soit l'équivalent outils pour IE, vous pouvez le singe avec votre javascript sur la console. Console.le journal sera également de sortie de texte et même des objets (CDT) que vous pouvez inspecter. Très utile pour explorer 🙂

    OriginalL'auteur MushinNoShin

  3. 0

    Plusieurs problèmes. Tout d'abord, dans l'attribut onclick, vous utilisez javascript: qui est pour les Url. Des trucs à l'intérieur de l'attribut onclick est déjà évalué comme du code. Deuxièmement, le code dans votre setTimeout doit être de chaîne ou un nom de fonction. Vous devriez faire quelque chose de plus comme ceci:

    HTML:

    <INPUT TYPE="SUBMIT" VALUE=" Create PDF " class="FORMBUTTON" ID="create_button" onclick="disable();">

    JavaScript:

    <script type="text/javascript">

    function disable() {
        x=document.getElementById("createbutton");
        x.disabled=true;
        x.value="Creating...";
        setTimeout(enable, 3000);
    }

    function enable() {
        x.disabled=false;
        x.value=" Create PDF ";
    }

</script>
    Désolé permet d'essayer de nouveau... Hey merci pour l'aide. Je n'étais même pas proche. Le bouton change maintenant et désactive et modifications, mais cela n'a pas soumettre le formulaire plus. J'ai déplacé le désactiver() l'appel à un onsubmit dans la balise form et tout fonctionne parfaitement. Vous la règle!
    Bon, content que ça a fonctionné. Vous pouvez supprimer ce commentaire précédent en passant la souris dessus et en appuyant sur la petite croix.

    OriginalL'auteur D. Strout

  4. 0

    Vous pouvez accéder au bouton, soit par id qui est unique au monde
    ou par le name unique pour l'affichage de la forme

    Donc, vous devez soit

    var x = document.getElementById("create_button");

    ou

    var x = document.LAYOUTFORM.elements["create_button_name"];

    (En supposant que create_button_name est le nom du bouton:

    <input type="submit" value=" Create PDF " id="create_button" name="create_button_name"  class="formButton" onclick="javascript:this.disabled=true;javascript:enable();">

    )

    Le premier paramètre de la setTimeout devrait être une fonction:

    setTimeout(removeAttr, 3000);

function removeAttr() {
    x.removeAttribute("disabled")
}

    BTW, HTML n'a pas besoin d'être (et ne doit pas être, pour des raisons de lisibilité, etc) tout en majuscules.

    OriginalL'auteur Nivas

  5. 0

    Il y a deux principaux problèmes avec votre JavaScript:

    1. La .getElementById() méthode appartient à document, pas à votre formulaire (ou à tout autre élément.

    2. setTimeout() attend le premier paramètre à une fonction (ou d'une chaîne, mais il n'y a presque jamais une situation lors de l'utilisation d'une chaîne de caractères est le cas).

    Essayez ceci:

    function enable() {
    var x = document.getElementById("create_button");
    setTimeout(function() {
       x.removeAttribute("disabled");
    }, 3000);
}

    Comme vous pouvez le combiner la désactivation et la réactivation en une seule fonction:

    <INPUT TYPE="SUBMIT" ... onclick="temporaryDisable(this);">

function temporaryDisable(el) {
    el.disabled = true;
    setTimeout(function() {
       el.disabled = false;
    }, 3000);
}

    Notez que vous n'avez pas besoin d'utiliser .removeAttribute(), vous pouvez simplement régler le .disabled directement la propriété (comme si vous étiez déjà en train de faire lorsque vous avez désactivé l'élément).

    EDIT: Viens de voir les "points bonus" partie de votre question. Vous avez juste besoin de mettre le .value propriété:

    function temporaryDisable(el) {
    var oldLabel = el.value;
    el.value = "Creating...";
    el.disabled = true;

    setTimeout(function() {
       el.disabled = false;
       el.value = oldLabel;
    }, 3000);
}
    Merci cela a fonctionné parfaitement, maintenant j'ai 2 options sur la façon de le faire. Peut-être que cela va aider quelqu'un d'autre avec le même problème à l'avenir. Google n'a pas beaucoup de ce problème particulier.

    OriginalL'auteur nnnnnn

  6. 0
    <script type="text/javascript">
function disDelay(obj){
obj.setAttribute('disabled','disabled');
setTimeout(function(){obj.removeAttribute('disabled')},30000)
}
</script>

<input type="submit" value="Submit" onclick="disDelay(this)">

    http://www.webdeveloper.com/forum/showthread.php?164239-Temporarily-Disable-Submit-Button

    OriginalL'auteur Pablo Pazos