Форма: отключение кнопки отправки при нажатии, форма не отправляется

Question

Я хочу отключить кнопку отправки, чтобы предотвратить двойные отправки.

Для этого я использую JQuery:

jQuery('#subnewtopicform').on('submit', function() { 
    jQuery('#subnewtopic').prop('disabled', true); 
}); 

И урезанный HTML:

<form action="" method="post" id="subnewtopicform"> 
     <input type="text" name="title" /> 
     <input type="submit" value="Submit" name="subnewtopic" id="subnewtopic" /> 
    </form> 

При нажатии кнопки отправки, она будет отключена и перезагружает страницу, но форма не будет представлена, почему?! Для меня это большая загадка.

Answer 1

У нас есть серьезные проблемы с двойным щелчком формы, поэтому я использую данные var5 var5 с таймером, который в основном отключает кнопку для N времени. Если вы установите это время очень высоким, он эффективно отключит кнопку от повторения чего-либо еще без фактического отключения самой кнопки отправки.

Затем вы можете отправить форму непосредственно с помощью функции JS.

jQuery('#subnewtopicform').on('submit', function (e) { 
     e.preventDefault(); 
     //prevent double clicking 
     if (!$(this).data('isClicked')) { 
      //store it for later in case of async 
      var link = $(this);    

      // Set the isClicked value and set a timer to reset and be re-clickable in 3seconds 
      link.data('isClicked', true); 
      setTimeout(function() { 
       link.removeData('isClicked') 
      }, 3000); 

      //submit the form with JS 
      //your form tag should have action and method on the html for this to go anywhere 
      $(this).submit(); 
     } 
     else { 
      return false; 
     } 
    }); 

Answer 2

Я использую атрибут 'onclick' ввода, потому что я не могу использовать jQuery. OnClick также широко используется для проверки данных перед отправкой формы

<input type="submit" value="Submit" name="subnewtopic" id="subnewtopic" onclick=" return disableButton();" /> 

Для вашего JavaScript:

<script> 
function disableButton() { 
var button = document.getElementById('subnewtopic'); 
button.disabled = true; 
return true; 
} 
</script> 

возвращающие сообщает форме представить после завершения функции.