Bootstrap Modal Popup Form Submit with Ajax & PHP
2018. 4. 18. 15:09ㆍ카테고리 없음
반응형
<!-- Latest minified bootstrap css --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <!-- Latest minified bootstrap js --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Button to trigger modal --> <button class="btn btn-success btn-lg" data-toggle="modal" data-target="#modalForm"> Open Contact Form </button> <!-- Modal --> <div class="modal fade" id="modalForm" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">×</span> <span class="sr-only">Close</span> </button> <h4 class="modal-title" id="myModalLabel">Contact Form</h4> </div> <!-- Modal Body --> <div class="modal-body"> <p class="statusMsg"></p> <form role="form"> <div class="form-group"> <label for="inputName">Name</label> <input type="text" class="form-control" id="inputName" placeholder="Enter your name"/> </div> <div class="form-group"> <label for="inputEmail">Email</label> <input type="email" class="form-control" id="inputEmail" placeholder="Enter your email"/> </div> <div class="form-group"> <label for="inputMessage">Message</label> <textarea class="form-control" id="inputMessage" placeholder="Enter your message"></textarea> </div> </form> </div> <!-- Modal Footer --> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary submitBtn" onclick="submitContactForm()">SUBMIT</button> </div> </div> </div> </div>
<script> function submitContactForm(){ var reg = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i; var name = $('#inputName').val(); var email = $('#inputEmail').val(); var message = $('#inputMessage').val(); if(name.trim() == '' ){ alert('Please enter your name.'); $('#inputName').focus(); return false; }else if(email.trim() == '' ){ alert('Please enter your email.'); $('#inputEmail').focus(); return false; }else if(email.trim() != '' && !reg.test(email)){ alert('Please enter valid email.'); $('#inputEmail').focus(); return false; }else if(message.trim() == '' ){ alert('Please enter your message.'); $('#inputMessage').focus(); return false; }else{ $.ajax({ type:'POST', url:'submit_form.php', data:'contactFrmSubmit=1&name='+name+'&email='+email+'&message='+message, beforeSend: function () { $('.submitBtn').attr("disabled","disabled"); $('.modal-body').css('opacity', '.5'); }, success:function(msg){ if(msg == 'ok'){ $('#inputName').val(''); $('#inputEmail').val(''); $('#inputMessage').val(''); $('.statusMsg').html('<span style="color:green;">Thanks for contacting us, we\'ll get back to you soon.</p>'); }else{ $('.statusMsg').html('<span style="color:red;">Some problem occurred, please try again.</span>'); } $('.submitBtn').removeAttr("disabled"); $('.modal-body').css('opacity', ''); } }); } } </script>
Send Contact Request Email (submit_form.php)
<?php
if(isset($_POST['contactFrmSubmit']) && !empty($_POST['name']) && !empty($_POST['email']) && (!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) === false) && !empty($_POST['message'])){
// Submitted form data
$name = $_POST['name'];
$email = $_POST['email'];
$message= $_POST['message'];
/*
* Send email to admin
*/
$to = 'admin@example.com';
$subject= 'Contact Request Submitted';
$htmlContent = '
<h4>Contact request has submitted at CodexWorld, details are given below.</h4>
<table cellspacing="0" style="width: 300px; height: 200px;">
<tr>
<th>Name:</th><td>'.$name.'</td>
</tr>
<tr style="background-color: #e0e0e0;">
<th>Email:</th><td>'.$email.'</td>
</tr>
<tr>
<th>Message:</th><td>'.$message.'</td>
</tr>
</table>';
// Set content-type header for sending HTML email
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
// Additional headers
$headers .= 'From: CodexWorld<sender@example.com>' . "\r\n";
// Send email
if(mail($to,$subject,$htmlContent,$headers)){
$status = 'ok';
}else{
$status = 'err';
}
// Output status
echo $status;die;
}
반응형