Hide Post Parameters in jQuery AJAX Request - php

Question

I am sending form parameters using serialize() method but the problem is parameters sent are visible in address bar. Even I am using POST method for AJAX request.
Here is the HTML Code for the form I am try to submit.
<form id="addform" method="post">
<div class="form-row">
<div class="form-group col-md-12">
<label for="inputReminder">Reminder Type</label>
<select id="inputReminder" class="form-control" name="inputReminder">
<option value="I">Reminder I</option>
<option value="II">Reminder II</option>
<option value="III">Reminder III</option>
<option value="General">General</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label for="inputLetterref">Reminder Reference No.</label>
<input type="text" class="form-control" id="inputLetterref" name="inputLetterref" placeholder="Reminder Reference No." required>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label for="inputLetterdate">Reminder Date</label>
<input type="text" readonly="readonly" class="form-control sel-date" id="inputLetterdate" name="inputLetterdate" placeholder="Reminder Date" required>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<button type="submit" class="btn btn-primary">Add Reminder </button>
</div>
</div>
</form>
jQuery AJAX request:
$("#addform").submit(function(event) {
event.preventDefault();
$.ajax({
type: 'POST',
url: 'submitdetails.php',
data: $(this).serialize()
}).done(function(data) {
$('#result').html(data);
}).error(function(data) {
$('#result').html(data);
});
});

Answer 1

You can try:
$("#addform").submit(function(event){
event.preventDefault();
$.ajax({
type: 'POST',
url : 'submitdetails.php',
data: $(this).serialize(),
done: function(data){
console.log(data)
$('#result').html(data);
},
fail: function(data){
$('#result').html(data);
}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="addform" method="post">
<div class="form-row" id="reminderresult">
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label for="inputReminder">Reminder Type</label>
<select id="inputReminder" class="form-control" name="inputReminder">
<option value="I">Reminder I</option>
<option value="II">Reminder II</option>
<option value="III">Reminder III</option>
<option value="General">General</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label for="inputLetterref">Reminder Reference No.</label>
<input type="text" class="form-control" id="inputLetterref" name="inputLetterref" placeholder="Reminder Reference No." required>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label for="inputLetterdate">Reminder Date</label>
<input type="text" readonly="readonly" class="form-control sel-date" id="inputLetterdate" name="inputLetterdate" placeholder="Reminder Date" required>
</div>
</div>
<button type="submit" class="btn btn-primary">Add Reminder </button>
</form>