양식이 제출되지 않으며 또한 페이지가 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'); 
    } 
    }); 
});