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> 

01以下

は、簡単のは<span/>タグでそれをラップさせ、ボタンのテキストを検索できるようにするためのレンダリングコード

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

です。

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