javascript/jquery désactive le bouton de soumission au clic, empêche la double soumission

StackOverflow https://stackoverflow.com//questions/11705337

Question

J'ai donc le bouton soumettre qui ressemble à ceci :

<a href="#" id="submitbutton" 
onClick="document.getElementById('UploaderSWF').submit();">
<img src="../images/user/create-product.png" border="0" /></a>

Lorsque je clique à double cliquer que Double se soumet évidemment, et le problème est que j'enregistre les informations dans la base de données, donc j'y aurai des informations Dublicate, et je ne veux pas cela.Cet uploader utilise flash et javscript et en voici un petit morceau de code qui est pertinent pour l’objet submit (si cela peut aider)

$.fn.agileUploaderSubmit = function() {
    if($.browser.msie && $.browser.version == '6.0') {
        window.document.agileUploaderSWF.submit();
    } else {
        document.getElementById('agileUploaderSWF').submit();
        return false;
    }
}

Merci les gars.J'apprécie ton aide.C’est vraiment quelque chose que je n’ai pas pu faire moi-même parce que j’ai si peu d’expérience avec js et je ne sais pas vraiment comment pour faire des choses.MERCI.

Était-ce utile?

La solution

Essayez ceci extrait :

$('#your_submit_id').click(function(){
    $(this).attr('disabled');
});

modifier 1

Oh, dans votre cas, c'est un lien et pas de bouton de soumission...

var submitted = false;

$.fn.agileUploaderSubmit = function() {
    if ( false == submitted )
    {
        submitted = true;

        if($.browser.msie && $.browser.version == '6.0') {
            window.document.agileUploaderSWF.submit();
        } else {
            document.getElementById('agileUploaderSWF').submit();
        }
    }

    return false;
}

modifier 2

Pour simplifier cela, essayez ceci :

<!doctype html>

<html dir="ltr" lang="en">

<head>

<meta charset="utf-8" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">
<!--//--><![CDATA[//><!--
    $(document).ready(function()
    {
        $('#yourSubmitId').click(function()
        {
            $(this).attr('disabled',true);

            /* your submit stuff here */

            return false;
        });
    });
//--><!]]>
</script>

</head>
<body>

<form id="yourFormId" name="yourFormId" method="post" action="#">
    <input type="image" id="yourSubmitId" name="yourSubmitId" src="yourImage.png" alt="Submit" />
</form>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

</body>
</html>

Utilisez des éléments de formulaire, comme <input type="image" />, pour soumettre un formulaire et non un lien normal.

Cela fonctionne bien !

Jeter un coup d'œil à jQuery.post() pour soumettre votre formulaire.

Bonne chance.

modifier 3

Cela fonctionne bien pour moi aussi :

<!doctype html>

<html dir="ltr" lang="en">

<head>

<meta charset="utf-8" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">
<!--//--><![CDATA[//><!--
    $(document).ready(function()
    {
        var agileUploaderSWFsubmitted = false;

        $('#submitbutton').click(function()
        {
            if ( false == agileUploaderSWFsubmitted )
            {
                agileUploaderSWFsubmitted = true;

                //console.log( 'click event triggered' );

                if ( $.browser.msie && $.browser.version == '6.0' )
                {
                    window.document.agileUploaderSWF.submit();
                }
                else
                {
                    document.getElementById( 'agileUploaderSWF' ).submit();
                }
            }

            return false;
        });
    });
//--><!]]>
</script>

</head>
<body>

<form id="agileUploaderSWF" name="agileUploaderSWF" method="post" action="http://your.action/script.php">
    <input type="text" id="agileUploaderSWF_text" name="agileUploaderSWF_text" />
</form>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

<a href="#" id="submitbutton"><img src="../images/user/create-product.png" border="0" /></a>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

</body>
</html>

J'espère que cela aide.

Autres conseils

Ajoutez ce qui suit au onclick:

onclick="document.getElementById('submitbutton').disabled = true;document.getElementById('UploaderSWF').submit();"

Cela dit, vous devrez également gérer cette prévention de double soumission côté serveur.

Selon http://api.jquerery.com/prop/ Vous pouvez ajouter et supprimer la propriété désactivée à l'aide de la fonction .prop (), pas des fonctions .ATR () et .REMOVEATTR ().

Ajouter la propriété: 

.prop("disabled", true);

Pour supprimer la propriété: 

.prop("disabled", false);

J'espère que cela vous aidera.

tel que proposé ici (avec des exemples):

Si vous voulez vous assurer que l'événement enregistré n'est tiré qu'une seule fois, vous devez utiliser JQuery's [One] [1]:

.One (événements [, données], gestionnaire) retourne: jQuery

Description: Joignez un gestionnaire à un événement pour les éléments.Le gestionnaire est exécuté au plus une fois par élément par type d'événement.

Ceci désactivera tous les boutons Soumettre et les liens avec la classe Soumettre ou l'attribut Data-Soumettre sous un formulaire si on clique sur: 

$(document).ready(function() {
    $('form').submit(function() {
        $(this).find('input[type="submit"]').attr('disabled', true);
        $(this).find('a[data-submit], a.submit').click(function() {
            return false;
        });
    }
});

Ceci s'applique automatiquement à chaque forme, à la manière.Si vous voulez juste un certain, utilisez l'ID au lieu du formulaire.Vous saviez que vous le saviez le plus probablement, cependant.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top