窗體不提交和頁面正在重新加載php

Question

我一直在試圖提交使用jQuery ajax的表單，並試圖該頁面不應該重新加載或刷新，但沒有任何這些目標正在完成。我錯過了什麼？

形式

<form method="POST" id="formReviews"> 
<div> 
    <label><b>Name</b></label> 
    <input style="width:400px;" type="text" class="form-control" placeholder="Enter your name" name="txtName" required> 
    </div> 

    <div> 
    <label><b>Area</b></label> 
    <input style="width:400px;" type="text" class="form-control" placeholder="Enter the area you would want to improvise" name="txtArea" required> 
</div> 

<div> 
<label><b>Details</b></label> 
<textarea style="width:400px;" type="comment" class="form-control" row="5" placeholder="Enter the some details" name="txtDetails" required></textarea> 
</div> 
<br> 
<div> 
    <button type="submit" class="btn btn-primary">Submit</button> 
</div> 
</form> 

的jQuery：

$(document).on('submit','formReviews',function(e){ 
    $.ajax({ 
    url: $(this).attr('action'), 
    type: $(this).attr('method'), 
    data: $(this).serialize(), 
    success: function(html){ 
     alert('Review Submitted'); 
    } 
    }); 
    e.preventDefault(); 
    }); 

reviews.php

<?php 
$servername = "localhost:3306"; 
$username = "mebe"; 
$password = "bethe"; 
$dbname = "SpecsCompare"; 

// Create connection 
$conn = new mysqli($servername, $username, $password, $dbname); 
// Check connection 
if ($conn->connect_error) { 
die("Connection failed: " . $conn->connect_error); 
} 

$sql="INSERT INTO reviews (Name, Area, Details) VALUES 
    ('".$_POST['txtName']."','".$_POST['txtArea']."','".$_POST['txtDetails']."')"; 

if ($conn->query($sql) === TRUE) { 
echo "New record created successfully"; 
} else { 
echo "Error: " . $sql . "<br>" . $conn->error; 
} 

$conn->close(); 
?> 

Answer 1

因爲你選擇的形式ID，您應該在前面使用＃符號。

另外，在第一行使用e.preventDefault。

$(document).on('submit','#formReviews',function(e) { 
    e.preventDefault(); // Add it here 
    $.ajax({ 
    url  : $(this).attr('action'), 
    type : $(this).attr('method'), 
    data : $(this).serialize(), 
    success : function(html){ 
     alert('Review Submitted'); 
    } 
    }); 
});