1

Parte del código de mi web es el siguiente formulario para enviar un email. Se validan los campos usando bootstrapValidator. Todo funciona correctamente, pero al enviar el email el navegador se redirecciona a ajaxSubmit.phpy la intención es que se quede donde esta. Que no se redireccione.

Como se aprecia en el código utilizo recaptcha de Google. Si usar el recaptcha de google y eliminando data-callback="onSubmit"del boton de envio, todo funciona correctamente

Parte de index.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>

El el fichero main.jsse realizan las comprobaciones de los campos y se coloca como visible la etiqueta correcto

$(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
});

2 respuestas 2

0

Puedes crear un <iframe id="request"> y direccionar la acción del formulario a dicho iframe con target="request". ten en cuenta que ajaxSubmit.php se ejecutara en el iframe y este es quien debe hacer visible la etiqueta id="correcto"

Otro error que veo en tu código es que envías el formulario como normalmente se hace con: action="..." pero sin embargo veo que en los script que utilizas ajax para enviarlo tambien?. te recomiendo que coloques en tu rutina onSubmit() {return false;}

Ejemplo:

<script src='https://www.google.com/recaptcha/api.js'></script>
<script>
function onSubmit(token) {

return false;
// document.getElementById("soporteForm").submit();

}
</script>
<form class="form-horizontal" id="soporteForm" method="post" 
action="ajaxSubmit.php" target="request">
...
...
...
  <iframe name="request" style="display:none">
  </iframe>

  <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>

El siguiente ejemplo muestra de manera simple como validar el formulario con html5 y enviarlo con Ajax.

Ejemplo:

function sendForm() {

 // Prevenir el Evento submit():
 event.preventDefault();

 // aqui colocas tu codigo ajax
 // donde envias el formulario
 console.log("Send in Progress...");

 var $form = $(event.target);

 $.post($form.attr('action'), $form.serialize(), function(result) {
  $('#postSuccessful').fadeIn();
 }, 'json');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="ajaxSubmit.php" onsubmit="sendForm()">
 codigo del cliente<br><input required><br>
 Nombre del cliente<br><input required><br>
 Direccion<br><input required><br>
 Telefono<br><input required><br>
 Email<br><input required><br>

 <input type="submit" value="Send">
</form>
<div id="postSuccessful" style="display:none">Formulario Recibido, Gracias!</div>

Espero esto te ayude... Saludos!! ;))...

12
  • Me esta abriendo ajaxSubmit.php en otra pestaña
    – aldakur
    el 15 may. 2017 a las 16:21
  • Disculpa hubo un error, lo correcto es: <iframe name="request", ya hago la corrección.
    – fwBasic
    el 15 may. 2017 a las 16:25
  • De este modo no se redirecciona pero los campos pueden ser vacíos. Es como que no se llama en ningún momento a main.js
    – aldakur
    el 15 may. 2017 a las 16:33
  • Creo que tienes otros problemas a parte del que mencionas en tu pregunta
    – fwBasic
    el 15 may. 2017 a las 16:42
  • Efectivamente, apenas uso jquery y javascript y en ocasiones me cuesta entender el funcionamiento
    – aldakur
    el 15 may. 2017 a las 16:48
0

Utilizando AJAX POST de Jquery evitas la redirección

$(function() {
//Validcion
    $(#soporteForm).submit(function() {
        $.ajax({
            type: 'POST',
            url: 'ajaxSubmit.php',
            data: {
                   nombre:$(this).nombre.value,
                   //resto de los campos
                  }
        });
        return false;
    }); 
})

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.