javascript/jquery desabilita o botão de envio ao clicar, evita envio duplo

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

Pergunta

Então eu tenho o botão de envio parecido com este:

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

Quando clico duas vezes em seu envio duplo, obviamente, e o problema é que estou salvando as informações no banco de dados, para que eu tenha informações de Dublicate lá, e não quero isso.Este uploader usa flash e javscript e aqui está um pequeno pedaço de código que é relevante para a coisa de enviar (se ajudar)

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

Obrigado pessoal.Eu aprecio sua ajuda.Isso é realmente algo que eu não consegui fazer, porque tenho uma experiência tão pequena com o JS e realmente não sei como fazer coisas.OBRIGADO.

Foi útil?

Solução

Experimente este recorte:

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

editar 1

Ah, no seu caso é um link e nenhum botão de envio...

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;
}

editar 2

Para simplificar isso, tente isto:

<!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>

Use elementos de formulário, como <input type="image" />, para enviar um formulário, não um link normal.

Isso funciona bem!

Dê uma olhada jQuery.post() para enviar seu formulário.

Boa sorte.

editar 3

Isso funciona bem para mim também:

<!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>

Espero que isso ajude.

Outras dicas

Adicione o seguinte ao onclick:

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

Dito isto, você também terá que lidar com essa prevenção de envio duplo no lado do servidor.

De acordo com http://api.jquery.com/prop/ você pode adicionar e remover a propriedade desabilitada usando a função .prop(), não as funções .attr() e .removeAttr().

Para adicionar a propriedade:

.prop("disabled", true);

Para remover a propriedade:

.prop("disabled", false);

Espero que isso ajude você.

como proposto aqui (com exemplos):

se você quiser ter certeza de que o evento registrado será disparado apenas uma vez, você deve usar [one][1] do jQuery:

.one(eventos [, dados], manipulador) Retorna:jQuery

Descrição:Anexe um manipulador a um evento para os elementos.O manipulador é executado no máximo uma vez por elemento por tipo de evento.

Isso desativará todos os botões de envio e links com a classe submit ou o atributo data-submit em um formulário se alguém for clicado:

$(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;
        });
    }
});

A propósito, isso se aplica automaticamente a todos os formulários.Se você quiser apenas um determinado, use o id em vez do formulário.Você provavelmente já sabia disso.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top