Не пойму почему не работает onclick. Возможно это связано с использованием формы bootstrap. Если что js подключен правильно, и другие скрипты работают.
Вот код:
<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-12 col-sm-12 ">
<div class="contact">
<p data-aos="zoom-in-down">Get <span>in touch</span></p>
<p data-aos="zoom-in-down" data-aos-delay="400">
<small>
Drop me a line
</small>
</p>
<div class="col-lg-offset-1 col-lg-9 col-lg-offset-2 col-sm-offset-1 col-sm-9 col-sm-offset-2">
<form class="form-horizontal" id="ajax-contact" method="post" >
<div class="form-group" data-aos="zoom-out-up">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" placeholder="Your name" required>
</div>
</div>
<div class="form-group" data-aos="zoom-out-up">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" name="email" placeholder="Your email" required>
</div>
</div>
<div class="form-group" data-aos="zoom-out-up">
<label for="message" class="col-sm-2 control-label">Message</label>
<div class="col-sm-10">
<textarea rows="10" class="form-control" id="message" name="message" placeholder="Your message" required></textarea>
</div>
</div>
<div class="form-group" data-aos="zoom-out-up">
<div class="col-sm-offset-2 col-sm-10">
<button onclick="formSubmit()" class="btn btn-default sub-btn" ><i class="fa fa-envelope" aria-hidden="true"></i> SEND
</button>
<div class="ui-widget" id="form-messages">
<div class="ui-state-active ui-corner-all" >
<p>
<!-- <span class="ui-icon ui-icon-check" style="width: 20px; height: 20px; z-index: 9999; display: inline-block"></span> -->
Sample ui-state-error style.
</p>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
JS:
$(window).on('load', function() {
// Preloader
$('#status').fadeOut();
$('#preloader').delay(150).fadeOut('slow');
$('body').delay(350).css({ 'overflow': 'visible' });
// Fallback request (AJAX)
var formMessages = $('#form-messages');
function formSubmit(event){
event.preventDefault();
// $(".btn").parent("form").submit();
var formData = $(form).serialize();
$.ajax({
type: 'POST',
url: 'php/mailer.php',
data: formData
})
.done(function(response) {
$('#form-messages .ui-corner-all').removeClass('.ui-state-error');
$('#form-messages .ui-corner-all').addClass('.ui-state-active');
$('#form-messages .ui-corner-all').text(response);
$('#form-messages .ui-corner-all').slideToggle("slow", function() {
$('#form-messages > .ui-corner-all').css("visibility", "visible");
});
// Clear the form.
$('#name').val('');
$('#email').val('');
$('#message').val('');
})
.fail(function(data) {
$(formMessages).removeClass('.ui-state-error');
$(formMessages).addClass('ui-state-active');
$('#form-messages .ui-corner-all').slideToggle("slow", function() {
$('#form-messages > .ui-corner-all').css("visibility", "visible");
if (data.responseText !== '') {
$(formMessages).text(data.responseText);
} else {
$(formMessages).text('Oops! An error occured and your message could not be sent.');
}
});
});
};
});
