フォームがJQueryで有効である場合、フォームを確認してメッ​​セージを表示

Question

私はDjangoアプリケーションを開発しており、JavaScriptを使用してウェブサイトを改善したいと考えています。

私はフォームを持っていると私は2つのことを表示したいと思います：

• は前にフォームがうまく送信された場合、
• を提出するメッセージを表示するフォームの確認：「フォームが保存されている」

を

私は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

使用して提出する機能に）（のための

$('#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>