如何在NodeJs express中禁用按鈕？

Question

我有以下表現形式，並希望第一次點擊時禁用submit button，以防止用戶連續點擊它。如果可能的話，我想提交按鈕的消息從

林改完成

到

請稍候...

下面是視圖代碼

<!-- 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"); 
      } 
     }) 
    }); 
});