Detención de un redireccionamiento formulario utilizando error AJAX

votos
0

tratando de hacerlo así que mi forma no redirige cuando el usuario entra en su correo electrónico y pulsa el botón OK.

Me parece que tienen el código AJAX propio trabajo como se muestra el mensaje de error, pero mi problema es que cada vez que los errores, así como muestra el mensaje de error 3 veces más.

He aquí el fragmento de código

    <script type=text/javascript>
        $(function () {
            $(document).scroll(function () {
                var $nav = $(.navbar-fixed-top);
                $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
            });
            $('.count').each(function () {
                $(this).prop('Counter', 0).animate({
                    Counter: $(this).text()
                }, {
                    duration: 7000,
                    easing: 'swing',
                    step: function (now) {
                        $(this).text(Math.ceil(now));
                    }
                });
                $(document).ready(function () {
                    var $form = $('.newsletter');
                    if ($form.length > 0) {
                        $('form input[type=submit]').bind('click', function (event) {
                            if (event) event.preventDefault();
                            register($form);
                        });
                    }
                });

                function register($form) {
                    $.ajax({
                        type: $form.attr('method'),
                        url: $form.attr('action'),
                        data: $form.serialize(),
                        cache: false,
                        dataType: 'json',
                        contentType: application/json; charset=utf-8,
                        error: function (err) {
                            alert(
                                Could not connect to the registration server. Please try again later.
                            );
                        },
                        success: function (data) {
                            if (data.result != success) {
                                // Something went wrong, do something to notify the user. maybe alert(data.msg);
                            } else {
                                // It worked, carry on...
                            }
                        }
                    });
                }
                $(document).ready(function () {
                    $('.customer-logos').slick({
                        slidesToShow: 4,
                        slidesToScroll: 1,
                        autoplay: true,
                        autoplaySpeed: 1500,
                        arrows: false,
                        dots: false,
                        pauseOnHover: false,
                        responsive: [{
                            breakpoint: 768,
                            settings: {
                                slidesToShow: 4
                            }
                        }, {
                            breakpoint: 520,
                            settings: {
                                slidesToShow: 3
                            }
                        }]
                    });
                });
            });
        })
    </script>
</head>

<body>
    <div class=top-bg style=position:relative;>
        <p class=text-uppercase-1 data-aos=fade-down data-aos-duration=900 data-aos-delay=100 data-aos-once=true
            data-aos-easing=ease-in-out id=top-banner-text-1 style=font-family:Karla, sans-serif;>AIRBNB CARES</p>
        <form class=newsletter action=https://airbnbcares.us19.list-manage.com/subscribe/post method=POST
            autocomplete=off>
            <input type=hidden name=u value=88baf6d86f9a8faebb5c5ec99>
            <input type=hidden name=id value=774141a683>
            <input type=email name=MERGE0 id=MERGE0 placeholder=Enter your email address to subscribe! tabindex=1
                class=newsletter-email required>
            <input type=submit class=newsletter-submit name=submit value=OK>
        </form>
    </div>

Si alguien puede arrojar algo de luz sobre esto sería muy apreciado!

Publicado el 02/09/2018 a las 05:44
fuente por usuario
En otros idiomas...                            


4 respuestas

votos
1

Es posible cambiar el botón ciego 'clic' para formar 'Enviar'

$('form').bind('submit', function (event) {
    if (event) event.preventDefault();
    register($form);
});

O cambiar el tipo de entrada 'enviar' a 'botón' (pero su forma no enviará datos de nombre de 'enviar')

<input type="button" class="newsletter-submit" name="submit" value="OK">
Respondida el 02/09/2018 a las 05:51
fuente por usuario

votos
0

Prueba esto .. Pero la dirección URL de destino no permitirá solicitud XML-HTTP bcoz de Access-Control-Allow-Origincabecera

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form class="newsletter" onsubmit="return sendData();"autocomplete="off" id='myform'>
            <input type="hidden" name="u" value="88baf6d86f9a8faebb5c5ec99">
            <input type="hidden" name="id" value="774141a683">
            <input type="email" name="MERGE0" id="MERGE0" placeholder="Enter your email address to subscribe!" tabindex="1"
                class="newsletter-email" required>
            <input type="submit" class="newsletter-submit" name="submit" value="OK">
        </form>
        
<script>
        
function sendData(){

var formData = $("#myform").serialize();

var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            
            var response = this.responseText;
            
            if(response == "success"){
            
              alert("done");
            
            }else{
            
              alert("faild");
            
            }
       }
};

xhttp.open("POST", "https://airbnbcares.us19.list-manage.com/subscribe/post", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send(formData);

return false;

}

</script>
        
        

Respondida el 02/09/2018 a las 08:18
fuente por usuario

votos
0

Cuando quiero evitar que otros controladores de eventos se ejecute después de un cierto evento se activa, el uso

event.preventDefault ();

$(document).ready(function (event) {
        event.preventDefault();
    // do your things ...

});
Respondida el 02/09/2018 a las 05:56
fuente por usuario

votos
0

retirar

$(document).ready(function () {
                    var $form = $('.newsletter');
                    if ($form.length > 0) {
                        $('form input[type="submit"]').bind('click', function (event) {
                            if (event) event.preventDefault();
                            register($form);
                        });
                    }
                });

Editar

<form class="newsletter" action="https://airbnbcares.us19.list-manage.com/subscribe/post" method="POST" autocomplete="off">

A

Añadir return false;al final de lafunction register

    function register($form) {
                        $.ajax({
                            type: $form.attr('method'),
                            url: $form.attr('action'),
                            data: $form.serialize(),
                            cache: false,
                            dataType: 'json',
                            contentType: "application/json; charset=utf-8",
                            error: function (err) {
                                alert(
                                    "Could not connect to the registration server. Please try again later."
                                );
                            },
                            success: function (data) {
                                if (data.result != "success") {
                                    // Something went wrong, do something to notify the user. maybe alert(data.msg);
                                } else {
                                    // It worked, carry on...
                                }
                            }
                        });

return false;                    

}
Respondida el 02/09/2018 a las 05:55
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more