Question

我正在尝试使用sweetAlert插件及其默认输入创建密码更改功能。

用户填写新密码，点击提交时，sweetAlert会出现并询问旧密码或问题。如何将输入值发布到PHP代码以验证旧密码然后提交表单？我陷入了将用户旧密码提交给php的地步。

到目前为止我所拥有的：

        var user_id = '<?php echo $row["user_id"] ?>';

        $("#hiddenUserID").val(user_id);
        //****************************************SUBMIT DATA ****************************************//
        $(document).on("click", "#updateProfile", function (e) {
            //$(".se-pre-con").show();

            $('#rootwizard').formValidation({
                framework: 'bootstrap',
                excluded: [':disabled'],
                icon: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },   
                live: 'enabled',

                framework: 'bootstrap',
                icon: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    userRetypePassword: {
                        validators: {
                            identical: {
                                field: 'userPassword',
                                message: 'password doesnt match'
                            }
                        }
                    },
                }
            }).on('err.field.fv', function(e, data) {
                // data.fv --> The FormValidation instance

                // Get the first invalid field
                var $invalidFields = data.fv.getInvalidFields().eq(0);

                // Get the tab that contains the first invalid field
                var $tabPane     = $invalidFields.parents('.tab-pane'),
                    invalidTabId = $tabPane.attr('id');

                // If the tab is not active
                if (!$tabPane.hasClass('active')) {
                    // Then activate it
                    $tabPane.parents('.tab-content')
                        .find('.tab-pane')
                        .each(function(index, tab) {
                        $(".fade").css("opacity", "1");
                        var tabId = $(tab).attr('id'),
                            $li   = $('a[href="#' + tabId + '"][data-toggle="tab"]').parent();

                        if (tabId === invalidTabId) {
                            // activate the tab pane
                            $(tab).addClass('active');
                            // and the associated <li> element
                            $li.addClass('active');
                        } else {
                            $(tab).removeClass('active');
                            $li.removeClass('active');
                        }
                    });

                    // Focus on the field
                    $invalidFields.focus();
                }
            }).on('success.field.fv', function(e, data) {
                // data.fv      --> The FormValidation instance
                // data.element --> The field element

                var $tabPane = data.element.parents('.tab-pane'),
                    tabId    = $tabPane.attr('id'),
                    $icon    = $('a[href="#' + tabId + '"][data-toggle="tab"]')
                .parent()
                .find('i')
                .removeClass('fa-check fa-times');

                // Check if all fields in tab are valid
                var isValidTab = data.fv.isValidContainer($tabPane);
                if (isValidTab !== null) {
                    $icon.addClass(isValidTab ? 'fa-check' : 'fa-times');
                }
            }).on('success.form.fv', function(e, data) {
                // Prevent form submission
                e.preventDefault();

                var $form    = $(e.target),
                    formData = new FormData(),
                    params   = $form.serializeArray();

                $.each(params, function(i, val) {
                    formData.append(val.name, val.value);
                });

                swal({
                    title: "password",
                    text: "enter old password",
                    type: "input",
                    showCancelButton: true,
                    closeOnConfirm: false,
                    animation: "slide-from-top",
                    inputPlaceholder: "password..."
                }, function(inputValue) {
                    if (inputValue === false) return false;
                    if (inputValue === "") {
                        swal.showInputError("type old password");
                        return false
                    }
                    $.ajax({
                        url: $form.attr('action'),
                        data: formData,
                        cache: false,
                        contentType: false,
                        processData: false,
                        type: 'POST',
                        success: function(data){
                            console.log(data);
                            if(data.status == 'success'){
                                console.log("success");    
                            }else if(data.status == 'error'){
                                $(".se-pre-con").fadeOut("slow");
                            }else if(data.status == 'general_info_error'){
                                $(".se-pre-con").fadeOut("slow");
                            }     
                        },
                        error: function(jqXHR, textStatus, errorThrown, data){
                            console.log(jqXHR, textStatus, errorThrown, data);
                        }
                    });
                });
            });
        });

HTML

    <div role="tabpanel" class="tab-pane  fade in active" id="tab1">
    <div class="page-subtitle margin-bottom-0">
            <h3>Password change</h3>
            <p>Change your password</p>
        </div>
        <div class="form-group-one-unit margin-bottom-40">
            <div class="row">
                <div class="col-md-3">
                    <label>password:</label>
                    <div class="form-group form-group-custom">

                        <input type="password" class="form-control" id="userPassword" name="userPassword">
                    </div>
                </div>
                <div class="col-md-3">
                    <label>retype password</label>
                    <div class="form-group form-group-custom">

                        <input type="password" class="form-control" id="userRetypePassword" name="userRetypePassword">
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

因此，经过一些试验和错误后，我将输入值附加到formdata并像魅力一样工作。

                }, function(typedPassword) {
                    if (typedPassword === false) return false;
                    if (typedPassword === "") {
                        swal.showInputError("Palun kirjutage oma parool!");
                        return false
                    }

                    var $form    = $(e.target),
                        formData = new FormData(),
                        params   = $form.serializeArray();

                    $.each(params, function(i, val) {
                        formData.append(val.name, val.value);
                    });
                    formData.append("typedPassword", typedPassword);

希望这也有助于某人。

Sweetalert插件输入帖子

HTML

1 个答案: