如果表單與JQuery有效，請確認表單和顯示消息

Question

我正在開發我的Django應用程序，並且我想使用JavaScript來改進我的網站。

我有一個表格，我想顯示兩件事情：

• 確認表單之前提交
• 如果表單同時提交，顯示一條消息：「保存表單」

這是我第一次使用JS，我需要幫助來完成這個過程。

這是我的代碼：

<form class = "form" method='POST' action=''> {% csrf_token %} 
     <br></br> 
     {{ form.as_p}} 
     <br></br> 

     <button type="submit">Valider</button> 
    </form> 

    <script> 
     $('#form').submit(function() { 
     var c = confirm("Click OK to continue?"); 
     return c; //you can just return c because it will be true or false 
    }); 
    </script> 

如果我的方式是有效的，並保存：

<script type="text/javascript" > 
       $(document).on('Valider', 'form.form', function(form) { 
       var $form = $(form); 
       $.ajax({ 
        url:"/path_to_my_html_file/BC_form2.html", 
        type: "POST", 
        success: function(form) { 
        alert("Form is saved"); 
        } 
       }); 
       }); 
      </script> 

你能幫助我嗎？

謝謝

Answer 1

您可以嘗試通過你的目的採取這種代碼：

$('#form').submit(function(e) { 
 
    // Prevents form to be submitted by default post request with page reloading 
 
    e.preventDefault(); 
 
    if (confirm("Click OK to continue?")) { 
 
     // Here you can call your AJAX request 
 
     callAjax($('input[type=text]').val()) 
 
    } 
 
}); 
 

 
function callAjax(value) { 
 
    // Making AJAX request to your endpoint 
 
    // GET ipify just for example 
 
    $.ajax({ 
 
     url:"https://api.ipify.org?format=json", 
 
     type: "GET", 
 
     success: function(form) { 
 
     alert("Form is saved"); 
 
     } 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="form"> 
 
    <input type="hidden" value="MOCK FOR CSRF TOKEN" /> 
 
    <br></br> 
 
    <input type="text" required /> 
 
    <br></br> 
 

 
    <button type="submit">Valider</button> 
 
</form>

Answer 2

使用.valid（）在提交功能

$('#form').submit(function() { 
    var isValid=$("#form").valid(); 
      if (isValid) { //If there is no validation error 

      var c = confirm("Click OK to continue?"); 
      if(c){ 
       $.ajax({ 
       url:"/path_to_my_html_file/BC_form2.html", 
       type: "POST", 
       success: function(form) { 
        alert("Form is saved"); 
       } 
       }); 

      } 

      } 
      else { 
      alert('form is not valid');        
      } 

     }); 
</script>