Here what i mean:
// page "/a" template a.php...
<form method="POST" action="<?=$pages->get('/submitmail/')->url;?>" id="contactMessage">
<h4>Form....</h4>
<input name="name" placeholder="Name" type="text" required>
<textarea name="comments" placeholder="Comment" rows="5" required></textarea><br>
<button type="submit" id="btnSend">Send</button>
</form>
<script>
$(document).on('submit', '#contactMessage', function(ev) {
ev.preventDefault();
let form = $(this);
let formData = form.serializeArray();
$('#btnSend').prop('disabled', true);
$('#btnSend').html('<i class="fa fa-spinner fa-spin"></i>please wait...wathever..');
$.ajax({
method: form.attr('method'),
url: form.attr('action'),
data: formData
}).done(function( msg ) {
alert("it works...");
document.querySelector('#contactMessage').reset();
}).fail(function() {
alert("Error!");
}).always(function() {
$('#btnSend').prop('disabled', false);
$('#btnSend').html('Send');
});
});
</script>
// page "/b" template b.php...
<?php
if ($config->ajax) {
$name = $_POST['name'];
$comments = $_POST['comments'];
// do anything with received data....
}