Ajax submit one page PHP - php

Question

I have code with single page PHP method
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<?php
if(isset($_POST['submit'])){
$date=$_POST['date'];
}else{
$date=date('Y-m-d');
}
?>
<form action="" method="post" id="formId">
<input type="text" name="date" id="datepicker">
<input type="submit" name="submit">
</form>
<?php echo $date; ?>
<script>
$(function() {
$('#datepicker').datepicker({
autoclose: true
})
});
</script>
how, if i want to use ajax to keep the page not to reload? please help me

Answer 1

ok so here is quick tutorial. ajax helps you to submit your form without page loading. You have to use action="somepage.php". when you click it it will pass the values there right away. so here is basic coding
<form id="formId">
<input type="text" name="dte" id="dte">
<button type="button" id="buttonsubmit">submit</button>
</form>
and ajax should be look like. In my coding id="buttonsubmit" is button id so when user will click it it run the function and takes the values
var dte;
$("#buttonsubmit").click(function(){
dte = $("#dte").val();
$.ajax({
url:"somepage.php",
method:"POST",
data:{dte: dte},
success: function (data){
if(data == "done"){
window.location='http://somedomain.com/';
}
}
});
});
in somepage.php you will have
<?php
if(isset($_POST['dte'])){
$date=$_POST['dte'];
echo "done";
}else{
$date=date('Y-m-d');
}
?>
note: i am writing echo "done"; in success method it will come and
according to code when success will see it will redirect the page