Skip to content

Instantly share code, notes, and snippets.

@noncent

noncent/bootstrap 3 form validation with ajax calls

Last active June 30, 2020 13:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save noncent/be19ed6dc220dfdcc0627d9a58422f63 to your computer and use it in GitHub Desktop.
Save noncent/be19ed6dc220dfdcc0627d9a58422f63 to your computer and use it in GitHub Desktop.
Download ZIP
Below code has a Modal Box and Form inside Modal. Form has validation and ajax submission. On submit modal box will close automatically and will open a new tab with pdf link.
Raw
bootstrap 3 form validation with ajax calls
<?php
// print all POST vars
print_r($_POST);
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="apple-touch-icon" type="image/png" href="https://static.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" />
<meta name="apple-mobile-web-app-title" content="CodePen">
<link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />
<link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />
<title>Bootstrap 3 Form Validation with Ajax Calls</title>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Lato:300,400,700'>
</head>
<body translate="no">
<body>
<div class="container">
<div class="row">
<a href="#" data-toggle="modal" data-target="#myModal" data-file="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf">Launch the Modal</a>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<!-- modal header -->
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Bootstrap 3 Modal Header</h4>
</div>
<div class="modal-body">
<!-- begin modal body content -->
<form id="contact-form" method="post" action="" role="form">
<div class="messages"></div>
<div class="controls">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="form_name">Firstname *</label>
<input id="form_name" type="text" name="name" class="form-control" placeholder="Please enter your firstname *" required="required" data-error="Firstname is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="form_lastname">Lastname *</label>
<input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Please enter your lastname *" required="required" data-error="Lastname is required.">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="form_email">Email *</label>
<input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required" data-error="Valid email is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="form_phone">Phone</label>
<input id="form_phone" type="tel" name="phone" class="form-control" placeholder="Please enter your phone">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="form_message">Message *</label>
<textarea id="form_message" name="message" class="form-control" placeholder="Message for me *" rows="4" required="required" data-error="Please,leave us a message."></textarea>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-12">
<input type="submit" class="btn btn-success btn-send" value="Send message">
</div>
</div>
</div>
</form>
<!-- end modal body content -->
</div>
</div>
</div>
</div>
<div class="col-lg-8 col-lg-offset-2"></div>
</div>
</div>
</body>
<script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-157cd5b220a5c80d4ff8e0e70ac069bffd87a61252088146915e8726e5d9f147.js"></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js'></script>
<script type="text/javascript">
$(function() {
// form identity
var $leadFormSubmission = $("#contact-form");
// BS3 form validator
$leadFormSubmission.validator();
// when the form is submitted
$leadFormSubmission.on("submit", function(e) {
// if the validator does not prevent form submit
if (!e.isDefaultPrevented()) {
// stop form submission
e.preventDefault();
// ajax post call
$.post('ajax.php', $leadFormSubmission.serialize(), function(data, textStatus, xhr) {
// get main modal id
let modalDivId = $leadFormSubmission.parents('.modal').attr('id');
// get a tag by custom attr
let modalInvokerTag = $('a[data-target="#' + modalDivId + '"]');
// after ajax success hide modal box
$('#'+modalDivId).modal('toggle');
// open a link pdf file in new window
window.open(modalInvokerTag.attr('data-file'), '_blank');
});
return false;
}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment