2017-01-11 5 views
3

こんにちは私は、AJAX submitフォームをjQuery Validateで使用しています。jQueryの検証とAJAXの送信フォームの書き方e.preventDefault();

問題はe.preventDefault();です。この場合、どのように記述するのか分かりません。

問題は次のとおりです。一般的なメソッドとAJAXメソッドでフォームを2回送信し、MySQLを2回挿入します。

<?php 
$servername = "localhost"; 
$username = "root"; 
$password = "1234"; 
$dbname = "test"; 

$conn = mysqli_connect($servername, $username, $password, $dbname); 

if ($_POST) { 
    $firstname = $_POST['firstname']; 
    $lastname = $_POST['lastname']; 
    $sql = "INSERT INTO test (firstname, lastname) VALUES ('$firstname', '$lastname')"; 
    mysqli_query($conn, $sql); 
    mysqli_close($conn); 
} 
?> 

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script> 
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/additional-methods.js"></script> 
</head> 
<body> 
<div id="kuy"> </div> 
<div id="lastname"></div> 
    <form id="myform" action="this_page.php" method="post"> 
     Firstname : <input type="text" name="firstname" required> <br> 
     Lastname : <input type="text" name="lastname" required> <br> 
     <input type="submit" value="Submit"> 
    </form> 

    <script> 
     $("#myform").validate({ 
      rules: { 
      // simple rule, converted to {required:true} 
      firstname: "required", 
      // compound rule 
      lastname: { 
       required: true, 
       email: true 
      } 
      }, 
      submitHandler: function(form) { 
      $.ajax({ 
       type : "POST", 
       url : 'this_page.php', 
       //dataType : 'json', // Notice json here 
       data : $(form).serialize(), // serializes the form's elements. 
       success : function (data) { 
        alert('success'); // show response from the php script. 

       } 
      }); 

      form.preventDefault(); 
      } 
     }); 
    </script> 
</body> 
</html> 
+0

form.preventDefault(); –

+0

も機能しません。 – doflamingo

+1

validates.js docを見ているかもしれません... –

答えて

4

フォームがdocsであなたはこれについての情報を見つけることができないという興味深い

$("#myform").validate({ 
    rules: { 
    // simple rule, converted to {required:true} 
    firstname: "required", 
    // compound rule 
    lastname: { 
     required: true, 
     email: true 
    } 
}).on('submit', function(e) { 
    e.preventDefault(); 
    var $form = $(this); 
    $.ajax({ 
     type : "POST", 
     url : 'this_page.php', 
     //dataType : 'json', // Notice json here 
     data : $form.serialize(), // serializes the form's elements. 
     success : function (data, response) { 
      alert(response); // show response from the php script. 
     } 
    }); 
}); 

有効になるまでそれは起こらないだろうとあなたは、別途 submitイベントをバインドすることができます...

関連する問題