联系表单在新页面上显示确认信息，而不是在 div (ajax) 中

Question

我正在尝试使该联系表工作：https : //bootstrapious.com/p/how-to-build-a-working-bootstrap-contact-form 但确认文本在新站点而不是 div 中打开“消息”。联系方式    <form id="contact-form" method="post" action="contactaction.php" role="form" data-toggle="validator">        <div class="messages"></div>    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js"></script>    <script src="contact.js"></script>联系人.js$(function () {    // init the validator    $('#contact-form').validator();    // when the form is submitted    $('#contact-form').on('submit', function (e) {        // if the validator does not prevent form submit        if (!e.isDefaultPrevented()) {            var url = "contact.php";            // POST values in the background the the script URL            $.ajax({                type: "POST",                url: url,                data: $(this).serialize(),                success: function (data)                {                    // data = JSON object that contact.php returns                    // we recieve the type of the message: success x danger and apply it to the                     var messageAlert = 'alert-' + data.type;                    var messageText = data.message;                    // let's compose Bootstrap alert box HTML                    var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' + messageText + '</div>';                    }                }            });            return false;        }    })});

Answer 1

只需使用 e.preventDefault(); 作为 onsubmit 函数的第一步：

     // when the form is submitted

     $(function () {

        // init the validator

        $('#contact-form').validator();

        // when the form is submitted

        $('#contact-form').on('submit', function (e) {

            e.preventDefault();

            // if the validator does not prevent form submit

            var url = "contact.php";

            // POST values in the background the the script URL

            $.ajax({

                type: "POST",

                url: url,

                data: $(this).serialize(),

                success: function (data)

                {

                    // data = JSON object that contact.php returns

                    // we recieve the type of the message: success x danger and apply it to the 

                    var messageAlert = 'alert-' + data.type;

                    var messageText = data.message;

                    // let's compose Bootstrap alert box HTML

                    var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' + messageText + '</div>';

                    // If we have messageAlert and messageText

                    if (messageAlert && messageText) {

                        // inject the alert to .messages div in our form

                        $('#contact-form').find('.messages').html(alertBox);

                        // empty the form

                        $('#contact-form')[0].reset();

                    }

                }

            });

            return false;

        })

    });