I created a subscription pop up box with bootstrap modal. In form’s action attribute created another file where I wrote code for saving email from pop up box and after saving I redirected the user again to homepage. As I am directing so again popup box is coming. How to get rid fo this.
Thanks in advance.
Add a flag in the javascript to conditionally trigger the modal.
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta charset="UTF-8">
<title>popup modal</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<!-- CODER compiled Jquery -->
<script type="text/javascript">
$(document).ready(function()
{setTimeout(function() {
$('#ksexampleModal').modal('show');}, 1000);
$('#ksexampleModal').on('shown.bs.modal', function () {
$('#emailid').trigger('focus');});
$("#popupgac").on('submit',function(event) {
event.preventDefault(); // to prevent default page reloading
var dataString = $(this).serialize(); // to get the form data
// Call ajax for pass data to other place
$.ajax({
type: 'POST',
url: 'actionks.php',
data: dataString, // getting filed value in serialize form
success: function(){
$('#popupgac')[0].reset();} // to reset form data
}).done(function(){
setTimeout(function () {
alert("Form submitted successfully! We'll get back to you soon. Thank you.");
}, 2000);
})
.done(function(data){ // if getting done then call.
// show the response
$("#ksexampleModal")[0].reset();
})
.fail(function() { // if fail then getting message
// just in case posting your form failed
alert( "Posting failed." );
});
});
});
</script>
<style>
.contactform-messages {
display: none;
}
.active {
display: block;
}
</style>
</head>
<body>
<div class="contactform-messages">Thank you for reaching out to us. We'll get back to you shortly!</div>
<div class="modal fade" id="ksexampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Subscribe to know more</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form method="POST" enctype="multipart/form-data" id="popupgac" >
<div class="modal-body">
<div class="form-group">
<label for="emailid" class="col-form-label">Email</label>
<input type="email" name="email" class="form-control" id="emailid" Placeholder="Enter Email here..." required>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" name="submit" class="btn btn-primary" id="kssubscribe">Subscribe</button>
</div>
</form>
</div>
</div>
</div>
<?php
// put your code here
?>
</body>
</html>
this is my code and not able to store if using ajax, please check ajax code.
Thanks in advance.