Остановка формы перенаправления, используя ошибку AJAX

голоса
0

пытаясь сделать так, что моя форма не перенаправляет когда пользователь вводит свой адрес электронной почты и нажимает кнопку OK.

Я, кажется, есть код AJAX сами работают как появляется сообщение об ошибке, но моя проблема в том, что это ошибки каждый раз, а также отображает сообщение об ошибке в 3 раза более.

Вот фрагмент кода

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

Если кто-то может пролить некоторый свет на это было бы очень признателен!

Задан 02/09/2018 в 05:44
источник пользователем
На других языках...                            


4 ответов

голоса
1

Вы можете изменить кнопку слепой «нажмите кнопку», чтобы сформировать «Отправить»

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

Или изменить тип входа «Отправить» на «кнопку» (но ваша форма не будет посылать имя данных «Отправить»)

<input type="button" class="newsletter-submit" name="submit" value="OK">
Ответил 02/09/2018 в 05:51
источник пользователем

голоса
0

Попробуйте это .. Но цель URL не позволит запрос XML-HTTP bcoz из Access-Control-Allow-Originзаголовка

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

Ответил 02/09/2018 в 08:18
источник пользователем

голоса
0

Когда я хочу, чтобы другие обработчики событий от выполнения после определенного события обжигают, использование

event.preventDefault ();

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

});
Ответил 02/09/2018 в 05:56
источник пользователем

голоса
0

Удалить

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

редактировать

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

к

Добавьте return false;в конце дляfunction 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;                    

}
Ответил 02/09/2018 в 05:55
источник пользователем

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