javascript/jquery desabilita o botão de envio ao clicar, evita envio duplo
-
13-12-2019 - |
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.
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.