表单没有提交，页面正在重新加载php

Question

I have been trying to submit a form using jquery ajax and trying that page should not reload or refresh but none of those objectives are getting accomplished. Am I missing anything?

form

<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

You should use a # sign in front since you are selecting the form id.

Also, use e.preventDefault in the very first line.

$(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');
    }
  });
});