时间戳

首页 > 解决方案 > 使用 AJAX 错误停止表单重定向

jquery - 使用 AJAX 错误停止表单重定向

问题描述

试图让它在用户输入他们的电子邮件并点击“确定”按钮时不会重定向我的表单。

我似乎让 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>

如果有人能对此有所了解，将不胜感激！

标签： jqueryhtmlajaxformsredirect

解决方案

您可以将盲按钮“单击”更改为“提交”

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

或将输入类型“提交”更改为“按钮”（但您的表单不会发送数据名称“提交”）

<input type="button" class="newsletter-submit" name="submit" value="OK">

推荐阅读