I am trying to submit a form using an ajax call without having to refresh the page.
Below is the HTML markup:
<form id="form">
<input type="radio" name="radio" value="radio1">
<input type="radio" name="radio" value="radio1">
<input type="checkbox" name="box" value="box1">
<input type="checkbox" name="box" value="box2">
<input type="text" name="text" value="box2">
<input type="submit" id="submit" name="submit" class="embtn btn-1" value="Send" onclick="submitform()">
</form>
Here is the associated JavaScript code:
function submitform(e) {
e.preventDefault();
$.ajax({
url : 'assets/php/brief-wiz.php',
type: 'post',
data: $('form').serialize()
}).done(function(html) {
$( ".form-message" ).append( html );
});
};
This is the PHP script being used:
<?php
$errors = [];
if (empty($_POST["radio"])) {
$errors[] = "Please select a radio option";
} else {
$radio = implode($_POST['radio']);
}
if (empty($_POST["box"])) {
$errors[] = "Please complete all checkboxes ";
} else {
$box = implode($_POST['box']);
}
$text = ($_POST['text']);
// Additional PHP code for sending email...
?>The issue faced is that the messages disappear quickly and the page reloads. How can I prevent this from happening?