How to call popup form after successful submission? - php

Question

I have a filling form, so i need when user fill in the required fields and click submit button, popup form will appear "You are successfully recorded"
Any ideas to implement this problem?
<fieldset class="field-set col col--full" style="false"> <label class="field-set__label"><?php echo _("Name"); ?></label>
<input type="text" class="field" name="fio" />
</fieldset>
<fieldset class="field-set col col--full" style="false">
<label class="field-set__label"><?php echo _("Company name"); ?></label>
<input type="text" class="field" name="company-name" />
</fieldset>
<fieldset class="field-set col col--full" style="false">
<label class="field-set__label"><?php echo _("E-mail"); ?></label>
<input type="email" class="field" name="E-mail" value="" placeholder="" />
</fieldset>
<fieldset class="field-set col col--full" style="text-align:center;">
<button id="callMe" class="button button--prime"><?php echo _('Submit'); ?></button>
</fieldset>
jQuery(document).ready(function($) {
$("#summer-party-form").submit(function() {
var str = $(this).serialize();
var btn = $(this).find("input[type=submit]");
var oldBtnTitle = btn.prop("value");
btn.prop("disabled", true).prop("value", "<?php echo _("Sending ");?>...");
$.ajax({
type: "POST",
url: "/engine/summerparty.php",
data: str,
success: function(msg) {
// Message Sent? Show the 'Thank You' message and hide the form
if (msg == 'OK') {
result = '<?php echo _("<big><big><big>You are recorded</big></big></big>"); ?>';
$("#summer-party-form .grid").hide();
} else {
result = msg;
btn.prop("disabled", false).prop("value", oldBtnTitle);
}
$('#summer-party-form .note').html(result);
}
});
return false;
});
});

Answer 1

In your style tags:
#import "compass/css3";
In a script tag:
window.setTimeout(function() {
$(".alert").fadeTo(500, 0).slideUp(500, function(){
$(this).remove();
});
}, 4000);
Within the body tags:
<div class="container">
<div class="row">
<div class="col-12 text-center>
<div class="alert alert-success" role="alert">
<button type="button" class="close data-dismiss="alert" aria-label="close"><span aria-hidden="true">×</span></button>
<strong>Success!</strong> Thank you for registering!
</div>
</div>
</div>
</div>
Redirect to a "successful submission" page or simply reload the page on submission and this will pop up saying thanks for registering. it will close itself after 4 seconds.
Obviously use some indenting on the code to save your eyes.
You need to make sure to import bootstrap too.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>