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

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

Это пример 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';

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

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

Мне пришлось настроить функцию, позволяющую им снова активировать кнопки через:

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

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

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

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

Любые советы будут высоко ценится.

Спасибо


javascript html jquery twitter-bootstrap
person Community    schedule 13.02.2014    source источник
comment
Это нормальное поведение (когда вы нажимаете кнопку «Назад» в браузере).. вы можете создать <a> на странице process.php, чтобы сбросить страницу, например. <a href="http://jimpix.co.uk/ecards/normal-ecard.asp?id=5480">Create another E-card</a>   -  person Adam Azad    schedule 13.02.2014

Ответы (3)


arrow_upward
0
arrow_downward

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

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

person StudioTime    schedule 13.02.2014

arrow_upward
0
arrow_downward

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

//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);

}
person 0__1    schedule 13.02.2014
comment
События щелчка не будут срабатывать, когда кнопки отключены, поэтому вторая половина вашего кода избыточна. - person Reinstate Monica Cellio; 13.02.2014

arrow_upward
0
arrow_downward

Просто запустите функцию следующим образом:

<button onclick="myfunction()" id="activate"></button>
<script>
function myfunction(){if(unrun==true){unrun=false;
document.getElementById("activate").innerHTML="Processing...."; 
code goes here;}}
</script>
person Daniel Pointon    schedule 10.07.2016
comment
Привет, спасибо за участие. Возможно, прочитайте Почему использование onclick является плохой практикой? - person Tibrogargan; 10.07.2016