Open Bootstrap Modal for ajax popup message after submitting a php-form

// Simple Ajax code to submit a form $.ajax({ type: "POST", url: "ajaxsubmit.php", data: dataString, cache: false, success: function(result){ // Simply give your modal an id something like "thankyouModal" $("#thankyouModal").modal('show') } });

4 Responses

Very needed! Thanks :)
@tem tut You're welcome!
:)
<?php
include("header.php");
?>

<body class="index">
<!-- Start Team Member Section -->
<section class="dist-pad">
<div class="fun-facts1">
<div class="container">

<div class="well"><b>Fill in the form to avail your free yearly Subscription..!!!</b></div>

<form class="form-horizontal well" name="sentMessage" id="contactForm" action="magazine-distribute.php" method="POST">

<div class="form-group">
<label class="col-sm-2 control-label">Company Name</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="companyname" name="companyname" placeholder="Company Name" required autofocus>
</div>
</div>
<div class="form-group">
<label for="concerned name" class="col-sm-2 control-label">Name of concerned pereson</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="refpereson" name="refpereson" placeholder="Name of concerned pereson" required autofocus>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Contact No.</label>
<div class="col-sm-4">
<input type="tel" class="form-control" id="contact" name="contact" placeholder="Contact Number" required autofocus>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">E-mail</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="email" name="email" placeholder="E-mail Address" required autofocus>
</div>
</div>

<div class="form-group">
<label for="address" class="col-sm-2 control-label">Address</label>
<div class="col-sm-6">
<textarea id="address" name="address" class="form-control" placeholder="Address" rows="5" required></textarea>
</div>
</div>
<div class="form-group">
<label for="concerned name" class="col-sm-2 control-label">Number of copies</label>
<div class="col-sm-4">
<input type="number" class="form-control" id="copies" name="copies" placeholder="Copies" required autofocus>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-6">
<button type="submit" class="btn btn-primary" >Send Message</button>
</div>

</div>
</form>
</div>
</section>
<!-- End Team Member Section -->
<div class="modal fade" id="thankyouModal" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>

</div>
</div>
<?php
if(empty($_POST['companyname']) || empty($_POST['refpereson']) || empty($_POST['contact']) || empty($_POST['email']) || empty($_POST['contact']) || empty($_POST['address']) ||empty($_POST['copies']) ||
!filter_var($_POST['email'],FILTER_VALIDATE_EMAIL))
{
echo "No arguments Provided!";
return false;
}
$companyname = $_POST['companyname'];
$refpereson = $_POST['refpereson'];
$email_address = $_POST['email'];
$contact = $_POST['contact'];
$address = $_POST['address'];
$copies = $_POST['copies'];

$to = 'swacreation.web@gmail.com';

$email_subject = "Ornate Distributer : $companyname";

$email_body = "You have received a new message from your website Distributer.\n\n"."Here are the details:\n\nName: $companyname\n\n Reference Person : $refpereson\n\n Contact Nunber : $contact\n\n Email: $email_address\n\n Address:$address \n\n Number Of Copies: $copies\n\n ";

$headers .= 'From: <ornatepune@ornatepune.org.in>' . "\r\n";

$headers .= "Reply-To: $email_address";

$a=mail($to,$email_subject,$email_body,$headers);
return true;
?>
<script>

cos$(function() { $("input,textarea").jqBootstrapValidation({ preventSubmit: true, submitError: function($form, event, errors) { // additional error messages or events
}, submitSuccess: function($form, event) { event.preventDefault(); // prevent default submit behaviour // get values from FORM
var name = $("input#companyname").val(); var name = $("input#refpereson").val(); var name = $("input#contact").val(); var email = $("input#email").val(); var contact = $("input#contact").val(); var address = $("textarea#address").val(); var copies = $("input#copies").val(); var firstName = companyname;

// For Success/Failure Message
// Check for white space in name for Success/Fail message

if (firstName.indexOf(' ') >= 0) { firstName = companyname.split(' ').slice(0, -1).join(' '); } $.ajax({ url:"magazine-distribute.php", type: "POST", data: { companyname: companyname, refpereson: refpereson, email: email, contact: contact , address: address , copies:copies ;}, cache: false,


success: function() {

$.ajax({
type: "POST",
url: "magazine-distribute.php",
data: dataString,
cache: false,
success: function(result){
// Simply give your modal an id something like "thankyouModal"
$("#thankyouModal").modal('show')
}
});

// Success message
//clear all fields
$('#contactForm').trigger("reset");
},


error: function() { // Fail message
$('#success').html("<div class='alert alert-danger'>"); $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;") .append("</button>"); $('#success > .alert-danger').append("<strong>Sorry " + firstName + ", it seems that my mail server is not responding. Please try again later!"); $('#success > .alert-danger').append('</div>'); //clear all fields
$('#contactForm').trigger("reset"); }, }) }, filter: function() { return $(this).is(":visible"); }, });
$("a[data-toggle=\"tab\"]").click(function(e) { e.preventDefault(); $(this).tab("show"); });});/*When clicking on Full hide fail/success boxes */$('#companyname').focus(function() { $('#success').html('');});
</script>
<?php
include("footer.php");
?>

Write a comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.