SweetAlert with Java Servlet

Question

私はフォームのonsubmitを一時停止したいので、続行する前にアクションを確認するようユーザーに依頼することができました。 だからここに私のフォームです：

function alertInfo(action) { 
document.querySelector(action).addEventListener('submit', function (e) { 
    var form = this; 
    e.preventDefault(); 
    if (action === "remove_book") { 
     swal({ 
      title: "Remove book?", 
      text: "Watch out", 
      type: "warning", 
      showCancelButton: true, 
      confirmButtonColor: "#DD6B55", 
      confirmButtonText: "Yes.", 
      cancelButtonText: "No.", 
      closeOnConfirm: false, 
      closeOnCancel: false 
     }, 
     function (isConfirm) { 
      if (isConfirm) { 
       swal({ 
        title: "Deleted.", 
        text: "Done.", 
        type: "success" 
       }, function() { 
          form.submit(); 
       }); 
      } else { 
       swal("Cancelled", "Not done.", "error"); 
      } 
     }); 
    } 
}); 
} 

しかし、いくつかの理由で、私は提出フォームにページのリロードを防ぐことができません：その後

  <form action="<%= request.getContextPath()%>/Controller" 
        method="POST" id="remove_book" 
        onsubmit="alertBookInfo('return_book')"> 
      </form> 

、私はSweetAlertを使用して、JavaScript関数を作成しました。私は間違っていますか？

PS：フォームでreturn alertInfo（）を使用し、JS関数からブール値を返すことで成功しました。

Answer 1

なぜ、このようにフォームから関数を呼び出していない、警告が表示されますフォームを送信する前に、プロンプト可能：

HTML

<form action="<%= request.getContextPath()%>/Controller" method="GET" id="remove_book" onclick="myAlertFunction(event)"> 
    <input type="submit"> 
</form> 

JavaScriptの

function myAlertFunction(event) { 
    event.preventDefault() 
    swal({ 
     title: "Remove book?", 
     text: "Watch out", 
     type: "warning", 
     showCancelButton: true, 
     confirmButtonColor: "#DD6B55", 
     confirmButtonText: "Yes.", 
     cancelButtonText: "No.", 
     closeOnConfirm: false, 
     closeOnCancel: false 
    }, 
    function(isConfirm) { 
     if (isConfirm) { 
     swal({ 
      title: "Deleted.", 
      text: "Done.", 
      type: "success" 
     }, function() { 
      $("#remove_book").submit(); 
     }); 
     } else { 
     swal("Cancelled", "Not done.", "error"); 
     } 
    }); 
} 

そして、あなたはリロードを防ぎたい場合、あなたは常にここevent.preventDefault()

を使用することができますが例です：JSFiddel

Answer 2

ページをリロードする必要がない場合は、AJAX呼び出しを使用できます。 submit（）を使用すると、送信の仕方がわかるので、常にページがリロードされます。あなたが春を使用している場合は、JSONが生成するような方法を定義する必要があり、あなたのコントローラで

$.ajax({ 
     method: "POST", 
     url: YOUR_ACTION_URL, 
     data: $('form').serialize(), 
     success: function(data){ 
      //here you could add swal to give feedback to the user 
     } 
    }); 

、注釈が@ResponseBodyある