Part of the code of my website is the following form to send a email
. Fields are validated using bootstrapValidator
. Everything works correctly, but when sending the email the browser is redirected to ajaxSubmit.php
and the intention is for it to stay where it is. That it is not redirected .
As can be seen in the code I use recaptcha
Google. If using the google recaptcha and removing the submit data-callback="onSubmit"
button, everything works correctly
Part ofindex.php
<script src='https://www.google.com/recaptcha/api.js'></script>
<script>
function onSubmit(token) {
document.getElementById("soporteForm").submit();
}
</script>
<form class="form-horizontal" id="soporteForm" method="post" action="ajaxSubmit.php">
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control campos" placeholder="Izena" name="nombre" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="email" class="form-control campos" placeholder="Posta elektronikoa" name="email" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<textarea class="form-control campos" placeholder="Mezua" name="mensaje" required></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<button type=submit class="btn btn-default g-recaptcha" data-sitekey="My_SECRET_KEY" data-callback="onSubmit">Enviar</button>
</div>
</div>
<div id="correcto">
Mensaje enviado correctamente
</div>
</form>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/bootstrapValidator.js"></script>
<script src="js/smooth-scroll.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/main.js"></script>
In the file main.js
, the checks of the fields are carried out and the label is placed as visiblecorrecto
$(document).ready(function(){
var nav = $('.navbar-fixed-top');
var distancia = $('.navbar-fixed-top').offset();
if(distancia.top > 0){
nav.removeClass('normal').addClass('efecto');
}
$(window).scroll(function(){
var scroll = $(window).scrollTop();
if (scroll >=300){
nav.removeClass('normal').addClass('efecto');
}else{
nav.removeClass('efecto').addClass('normal');
}
})
$('section#pantallas a').on('click',function(){
$('#modal img').attr('src', $(this).attr('data-image-url'));
})
$('section#app .anima1').waypoint(function(){
$('section#app .anima1').addClass('animated fadeInUp');
},{
offset:'60%'
});
$('section#app .anima2').waypoint(function(){
$('section#app .anima2').addClass('animated fadeInUp');
},{
offset:'60%'
});
$('section#app .anima3').waypoint(function(){
$('section#app .anima3').addClass('animated fadeInUp');
},{
offset:'60%'
});
$('section#caracteristicas #appCentral').waypoint(function(){
$(this).addClass('animated fadeInDownBig');
},{
offset:'60%'
});
$('section#caracteristicas .anima1').waypoint(function(){
$(this).addClass('animated fadeInLeft');
},{
offset:'60%'
});
$('section#caracteristicas .anima2').waypoint(function(){
$(this).addClass('animated fadeInRight');
},{
offset:'60%'
});
$('section#pantallas .anima1').waypoint(function(){
$(this).addClass('animated fadeInRight');
},{
offset:'60%'
});
$('section#pantallas .anima2').waypoint(function(){
$(this).addClass('animated fadeInRight');
},{
offset:'60%'
});
$('section#pantallas .anima3').waypoint(function(){
$(this).addClass('animated fadeInRight');
},{
offset:'60%'
});
$('section#descargar .anima1').waypoint(function(){
$(this).addClass('animated fadeInRight');
},{
offset:'60%'
});
$('section#descargar .anima2').waypoint(function(){
$(this).addClass('animated fadeInRight');
},{
offset:'60%'
});
$('section#descargar .anima3').waypoint(function(){
$(this).addClass('animated fadeInRight');
},{
offset:'60%'
});
$('#soporteForm').bootstrapValidator({
message:"Esto no es válido",
feedbackIcons:{
valid:'glyphicon glyphicon-ok',
invalid:'glyphicon glyphicon-remove',
validating:'glyphicon glyphicon-refresh'
},
fields:{
nombre:{
validators:{
notEmpty:{
message: "Atal hau betebeharrekoa da"
},
}
},
email:{
validators:{
notEmpty:{
message: "Atal hau betebeharrekoa da"
},
emailAddress:{
message: "Honek ez dirudi posta elektroniko bat"
}
}
},
mensaje:{
validators:{
notEmpty:{
message: "Mezua ezin du hutsik egon"
}
}
}
}
}).on('success.form.bv', function(e){
e.preventDefault();
var $form = $(e.target);
var bv = $form.data('bootstrapValidator');
$.post($form.attr('action'), $form.serialize(), function(result){
$('#correcto').fadeIn();
console.log(result);
}, 'json');
});
});
smoothScroll.init({
selector: '[data-scroll]', // Selector for links (must be a valid CSS selector)
selectorHeader: '[data-scroll-header]', // Selector for fixed headers (must be a valid CSS selector)
speed: 700, // Integer. How fast to complete the scroll in milliseconds
easing: 'easeInOutQuad', // Easing pattern to use
offset: 0, // Integer. How far to offset the scrolling anchor location in pixels
updateURL: false, // Boolean. If true, update the URL hash on scroll
callback: function ( anchor, toggle ) {} // Function to run after scrolling
});