Отключение кнопки при нажатии

Question

У меня есть форма, которую пользователи могут использовать для отправки открытки.

Это пример URL: http://jimpix.co.uk/ecards/normal-ecard.asp?id=5480

В нижней части формы есть этот HTML (охватывающих кнопки посыла):

<div class="col-lg-6"> 
    <legend>Next bit...</legend> 
    <button type="button" id="BtnPrev" class="btn btn-info" onclick="return valFormPrev(theForm,'preview');"/>Preview Your Ecard</button> 
    <button type="button" id="BtnGo" class="btn btn-success" class="preview" onclick="return valFormGo(theForm,'process');"/>Send Now</button> 
    <p class="top10"><a href="#BtnPrev" onclick="return ResetBtns();">Reset buttons so you can use them again</a></p> 
</div> 

Поскольку страница может занять некоторое время, чтобы обработать, когда пользователи нажимают на кнопку, я добавил это к концу JS, используемому для проверки форм (находится по адресу http://jimpix.co.uk/dist/js/ecard.js)

Скажите, что пользователь нажимает кнопку «Отправить сейчас», она вызывает функцию «valFormGo».

, который содержит этот код около конца:

document.getElementById("BtnGo").disabled = 'true'; 

Это отключает кнопку, если пользователь нажимает на нее, так что они не могут нажать его много раз и отправить ту же Ecard много раз.

Это похоже на работу, но если после того, как они отправили электронную почту, они нажмут кнопку «Назад», например. отправьте снова кому-то еще, кнопка остается отключенной, даже если страница обновлена.

я должен был создать функцию, чтобы позволить им сделать кнопки активных снова через:

function ResetBtns() 
{ 
    document.getElementById('BtnPrev').removeAttribute("disabled"); 
    document.getElementById('BtnGo').removeAttribute("disabled"); 
} 

Это работает, но это неуклюжее.

Я просто задавался вопросом, знает ли кто-нибудь о более элегантном решении, которое я мог бы использовать, чтобы отключить кнопку при нажатии, или, может быть, кнопка изменит текст, чтобы сказать «обработка ...», когда он ждет на следующей странице для обработки данных.

В принципе, я сделал эту работу, и было бы очень полезно, если кто-нибудь сможет проконсультироваться по возможным альтернативам.

Любой совет будет очень благодарен.

Благодаря

Answer 1

Попробуйте это:

//to disable buttons 
$('BtnPrev').click(function(){ 

    this.prop('disabled', true); 

}); 

$('BtnGo').click(function(){ 

    this.prop('disabled', true); 

}); 

//to enable buttons 
function ResetBtns() {  

    $('BtnPrev').prop('disabled', false); 
    $('BtnGo').prop('disabled', false); 

} 

Answer 2

Почему не перерабатывают в электронную открытку на той же странице, используя Ajax метод, то в случае успеха вы можете отменить отключить кнопку отправки.

В настоящий момент не может быть никакого кода, поскольку вы не уверены в своем текущем потоке/методе, который используется.

Answer 3

Просто сделайте функцию запуска, как это:

<button onclick="myfunction()" id="activate"></button> 
<script> 
function myfunction(){if(unrun==true){unrun=false; 
document.getElementById("activate").innerHTML="Processing...."; 
code goes here;}} 
</script>