how to submit ajax form on same page in wordpress - php

Question

I'm new to wordpress, I want a customize form, so I created this form where user can input data from front end. But when I submit this form, if it is successful, Within <div id="feedback"></div>, whole page has been shown again. Because of I get all "data" in the ajax success or error function. How can I get only data which is in echo??
<?php
/*
Template Name: Complain
*/
get_header();
?>
<?php
if($_POST['submit']) {
global $wpdb;
$complain_name = $_POST['complain_name'];
if($wpdb->insert(
'wp_complain',
array(
'name'=>$complain_name
)
)==false) {
echo 'Database insertion failed';
}
else {
echo 'Database insertion successful';
}
}
else {
?>
<form action="" method="POST" role="form" class="form-horizontal">
Name <input type="text" id="complain_name" class="form-control" name="complain_name" required="required" autocomplete="off"/>
<input class="btn btn-block" id="submit" type="submit" value="Submit" name="submit">
<div id="feedback"></div>
</form>
<script>
$(document).ready(function(e){
$("form").on('submit',(function(e) {
e.preventDefault();
//heresome other functions for validation
formData =new FormData(this)
$.ajax({
url:'<?php echo content_url(); ?>/themes/abc/complain-detail.php',
type: "POST",
data: formData ,
contentType: false,
cache: false,
processData:false,
success: function(data)
{
$('#feedback').html(data)
},
error: function(data)
{
$('#feedback').html(data)
}
});
}
));
})
</script>
<?php
}
get_footer();
?>

Answer 1

Use die("...."); instead of echo "...."; witch will stop your PHP code at this line, So your HTML won't be shown.
if( isset($_POST["submit"]) && !empty($_POST["submit"]) ){
if(inserted)
die("Database insertion successful"); //PHP will stop here
else
die("Database insertion failed"); //or here
}
//Your HTML won't be shown ...

Answer 2

const form = document.querySelector(".form-horizontal");
const ajax = new XMLHttpRequest();
form.addEventListener("submit",function(e){
e.preventDefault();
let data = new ForData();
data.append("complain_name",document.querySelector(".form-control").value);
ajax.open("POST",'<?php echo content_url(); ?>/themes/abc/complain-detail.php');
ajax.send(data);
if (this.readyState == 4 && this.status == 200){
document.querySelector(".feedback").textContent = "Thanks for your feedback.";
}else{
document.querySelector(".feedback").textContent = "Sorry,something when wrong,please try again later.";
}
});
<form action="" method="POST" role="form" class="form-horizontal">
Name <input type="text" id="complain_name" class="form-control" name="complain_name" required="required" autocomplete="off"/>
<input class="btn btn-block" id="submit" type="submit" value="Submit" name="submit">
<div id="feedback"></div>
</form>