javascript - jQuery Submit 函数不会发布值

Question

我目前在 jQuery post 函数方面遇到了困难，我在谷歌上使用了一些其他示例。我曾尝试在 stackoverflow 中搜索解决方案，但遗憾的是我太穷了，无法找出错误。

这是我用来制作确认框的 jQuery 示例:

   (function ($) {

    /**
     * Confirm a link or a button
     * @param [options] {{title, text, confirm, cancel, confirmButton, cancelButton, post, confirmButtonClass}}
     */
    $.fn.confirm = function (options) {
        if (typeof options === 'undefined') {
            options = {};
        }

        this.click(function (e) {
            e.preventDefault();

            var newOptions = $.extend({
                button: $(this)
            }, options);

            $.confirm(newOptions, e);
        });

        return this;
    };

    /**
     * Show a confirmation dialog
     * @param [options] {{title, text, confirm, cancel, confirmButton, cancelButton, post, confirmButtonClass}}
     * @param [e] {Event}
     */
    $.confirm = function (options, e) {
        // Do nothing when active confirm modal.
        if ($('.confirmation-modal').length > 0)
            return;

        // Parse options defined with "data-" attributes
        var dataOptions = {};
        if (options.button) {
            var dataOptionsMapping = {
                'title': 'title',
                'text': 'text',
                'confirm-button': 'confirmButton',
                'cancel-button': 'cancelButton',
                'confirm-button-class': 'confirmButtonClass',
                'cancel-button-class': 'cancelButtonClass'
            };
            $.each(dataOptionsMapping, function(attributeName, optionName) {
                var value = options.button.data(attributeName);
                if (value) {
                    dataOptions[optionName] = value;
                }
            });
        }

        // Default options
        var settings = $.extend({}, $.confirm.options, {
            confirm: function () {
                var url = e && (('string' === typeof e && e) || (e.currentTarget && e.currentTarget.attributes['href'].value));
                if (url) {
                    if (options.post) {
                        var form = $('<form method="post" class="hide" action="' + url + '"></form>');
                        $("body").append(form);
                        form.submit();
                    } else {
                        window.location = url;
                    }
                }
            },
            cancel: function (o) {
            },
            button: null
        }, dataOptions, options);

        // Modal
        var modalHeader = '';
        if (settings.title !== '') {
            modalHeader =
                '<div class=modal-header>' +
                    '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
                    '<h4 class="modal-title">' + settings.title+'</h4>' +
                '</div>';
        }
        var modalHTML =
                '<div class="confirmation-modal modal fade" tabindex="-1" role="dialog">' +
                    '<div class="modal-dialog">' +
                        '<div class="modal-content">' +
                            modalHeader +
                            '<div class="modal-body">' + settings.text + '</div>' +
                            '<div class="modal-footer">' +
                                '<button class="confirm btn ' + settings.confirmButtonClass + '" type="button" data-dismiss="modal">' +
                                    settings.confirmButton +
                                '</button>' +
                                '<button class="cancel btn ' + settings.cancelButtonClass + '" type="button" data-dismiss="modal">' +
                                    settings.cancelButton +
                                '</button>' +
                            '</div>' +
                        '</div>' +
                    '</div>' +
                '</div>';

        var modal = $(modalHTML);

        modal.on('shown.bs.modal', function () {
            modal.find(".btn-primary:first").focus();
        });
        modal.on('hidden.bs.modal', function () {
            modal.remove();
        });
        modal.find(".confirm").click(function () {
            settings.confirm(settings.button);
        });
        modal.find(".cancel").click(function () {
            settings.cancel(settings.button);
        });

        // Show the modal
        $("body").append(modal);
        modal.modal('show');
    };

这是我用来提交表单和确认框的 php 文件:

                    <form role="form" action="bannerConfig.php" method="POST">
                            <div class="box-body">
                                <div class="form-group" >
                                    <label for="bannerWidth">Width 宽度</label>
                                    <input type="number" class="form-control" name="bannerWidth" id="bannerWidth" placeholder="600px" onChange="checkDisabled(simpleConfirm);">
                                </div>
                                <div class="form-group">
                                    <label for="bannerHeight">Height 高度</label>
                                    <input type="number" class="form-control" name="bannerHeight" id="bannerHeight" placeholder="280px" onChange="checkDisabled(simpleConfirm);">
                                </div>

                                <p class="help-block">Recommended Banner Size: (1920px * 500px)</p>                     

                                <div class="checkbox">
                                    <button id="simpleConfirm" type="submit" class="btn btn-primary" disabled>Update</button>        
                                </div>
                            </div><!-- /.box-body -->


                        </form>     

<!--Banner configuration confirmation-->
        <script>
            $(document).ready(function(){
                $("#simpleConfirm").confirm();
            }); 
        </script>

每次我单击"is"时，它都应该发布并将我链接到bannerConfig.php，但当我单击"is"时，什么也没有发生。有没有我错误输入的代码？提前致谢，祝您有美好的一天。

已编辑:这是我的服务器端 php 代码:

<?php
    include 'dbConnection.php';

    global $dbLink;
    //Gather all required data
    $width = $dbLink->real_escape_string($_POST['bannerWidth']);
    $height = $dbLink->real_escape_string($_POST['bannerHeight']);

    //Create the SQL query
    //$query = "INSERT INTO banner_config (banner_id, banner_height, banner_width, date) VALUES ('','{$height}', {$width}, NOW())";
    $query = "UPDATE banner_config SET banner_height = '$height', banner_width = '$width', date=NOW()";
    //Execute the query
    $result = $dbLink->query($query);
        //Check if it was successfull

    // Close the mysql connection
    $dbLink->close();

?>

Answer 1

在您的情况下，问题是，您正在创建一个动态表单并在没有任何输入数据的情况下提交它，而不是提交存在按钮的表单。

我认为实际的表单提交逻辑可以使用回调来完成。喜欢

    // Default options
    var settings = $.extend({}, $.confirm.options, {
        confirm: $.noop,
        cancel: function (o) {},
        button: null
    }, dataOptions, options);

然后

$("#simpleConfirm").confirm({
    confirm: function (el) {
        el.closest('form').submit()
    }
});

演示:Fiddle

<小时/>

另一种选择是找到该按钮所在的表单，然后像这样提交

    // Default options
    var settings = $.extend({}, $.confirm.options, {
        confirm: function () {
            var $form = $(e.target).closest('form');
            var url = $form.attr('action');
            if (url) {
                if (options.post) {
                    $form.submit();
                } else {
                    window.location = url;
                }
            }
        },
        cancel: function (o) {},
        button: null
    }, dataOptions, options);

演示:Fiddle