Как отключить кнопку в NodeJs express?

Question

У меня есть следующая форма, которая визуализируется и хочет, чтобы submit button был отключен при первом щелчке, чтобы пользователь не нажимал на него. Если это возможно, я хотел бы представить кнопку сообщения для перехода от

Im сделано

в

Пожалуйста, подождите ...

Ниже приведен код вида

<!-- Send email and update user --> 
       <form method="post" action="/delivery/chooseBoxSelectedEmailUpdate"> 
        <input type="hidden" name="boxCommand" value="{{command}}"> 
        <input type="hidden" name="boxComport" value="{{comport}}"> 
        <input type="hidden" name="boxCubbyId" value="{{cubbyId}}"> 
        <input type="hidden" name="boxId" value="{{boxId}}"> 
        <input type="hidden" name="userHashtag" value="{{userHashtag}}"> 

        <button class="btn-primary-full" type="submit"> 
         <i class="fa fa-cube" aria-hidden="true"></i> 
         &nbsp;I'm done 
        </button> 
       </form> 

Ниже рендер код

res.render('delivery/chooseBoxSelectedOpened', { 
     title: 'Layoverbox', 
     helpButtonURL: '/help/help-dropPackage', 
     helpButtonTitle: 'Help', 
     boxComport: comport, 
     boxCommand: command, 
     cubbyId: rows[i].cubby_id, 
     boxId: boxSelectedValue 

    }); 

Answer 1

HTML

Для того, чтобы было легче найти текст кнопки, давайте оберните его <span/> тега.

<button class="btn-primary-full" type="submit"> 
    <i class="fa fa-cube" aria-hidden="true"></i> 
    &nbsp;<span>I'm done</span> 
</button> 

JavaScript

Я предполагаю, что вы написали onsubmit обработчик для формы.

При нажатии на кнопку отправки перед выполнением запроса AJAX отключите и установите текст кнопки отправки.

После получения ответа от вашего запроса AJAX в обработчике success или complete включите и сбросьте текст кнопки отправки.

$(function() { 
    $(document).on('submit', 'form', function (e) { 
     e.preventDefault(); 
     // find and cache submit button within the form 
     var button = $('button[type=submit]', this); 
     // disable and set the text 
     button.prop('disabled', true).find('span').text("Please wait..."); 
     // make AJAX call 
     $.ajax({ 
      // etc 
      success: function (data) { 
       button.prop('disabled', false).find('span').text("I'm done"); 
      } 
     }) 
    }); 
});