时间戳

首页 > 解决方案 > 不使用 javascript 提交表单数据

javascript - 不使用 javascript 提交表单数据

问题描述

TL;博士

如何制作一个表单来发布一个普通的帖子，而不是通过 JQuery 提交？

我最近买了一个主题，我正在制作一个包含几个步骤的表格。我正在使用这个主题的“向导”组件，你可以通过这个链接看到它是如何工作的：

https://keenthemes.com/metronic/preview/demo1/custom/pages/wizard/wizard-2.html

我的问题是提交此表格。我想做一个共同的提交。就目前而言，表单必须使用 JQuery 提交。

我对表单进行了一些更改，以便能够进行共同提交。例如：

我通知了 POST 方法和表单的操作：

<form class="m-form m-form--label-align-right- m-form--state-" id="m_form" action="sale/new" method="post" enctype="multipart/form-data">

我还创建了一个“提交”按钮：

<button type="submit" class="btn btn-primary" data-wizard-action="submit">Save</button>

对于向导工作，表单必须有一个 id (m_form)，提交按钮也必须有属性 data-wizard-action="submit"。

我使用的是主题本身的javascript，正是因为我对JS不太了解，我才相信我遇到了问题。我试图删除 e.preventDefault，但表单仍然没有发布到我确定的操作。我正在使用的主题的 javascript 代码是这样的：

//== Class definition
var WizardDemo = function () {
    //== Base elements
    var wizardEl = $('#m_wizard');
    var formEl = $('#m_form');
    var validator;
    var wizard;

    //== Private functions
    var initWizard = function () {
        //== Initialize form wizard
        wizard = new mWizard('m_wizard', {
            startStep: 1
        });

        //== Validation before going to next page
        wizard.on('beforeNext', function(wizardObj) {
            if (validator.form() !== true) {
                wizardObj.stop();  // don't go to the next step
            }
        })

        //== Change event
        wizard.on('change', function(wizard) {
            mUtil.scrollTop();            
        });

        //== Change event
        wizard.on('change', function(wizard) {
            if (wizard.getStep() === 1) {
                // alert(1);
            }           
        });
    }

    var initValidation = function() {
        validator = formEl.validate({
            //== Validate only visible fields
            ignore: ":hidden",

            //== Validation rules
            rules: {
                //=== Client Information(step 1)
                //== Client details
                name: {
                    required: true 
                },
                email: {
                    required: true,
                    email: true 
                },       
                phone: {
                    required: true,
                    phoneUS: true 
                },     

                //== Mailing address
                address1: {
                    required: true 
                },
                city: {
                    required: true 
                },
                state: {
                    required: true 
                },
                city: {
                    required: true 
                },
                country: {
                    required: true 
                },

                //=== Client Information(step 2)
                //== Account Details
                account_url: {
                    required: true,
                    url: true
                },
                account_username: {
                    required: true,
                    minlength: 4
                },
                account_password: {
                    required: true,
                    minlength: 6
                },                

                //== Client Settings
                account_group: {
                     required: true
                },                
                'account_communication[]': {
                    required: true
                },

                //=== Client Information(step 3)
                //== Billing Information
                billing_card_name: {
                    required: true
                },
                billing_card_number: {
                    required: true,
                    creditcard: true
                },
                billing_card_exp_month: {
                    required: true
                },
                billing_card_exp_year: {
                    required: true
                },
                billing_card_cvv: {
                    required: true,
                    minlength: 2,
                    maxlength: 3
                },

                //== Billing Address
                billing_address_1: {
                    required: true
                },
                billing_address_2: {

                },
                billing_city: {
                    required: true
                },
                billing_state: {
                    required: true
                },
                billing_zip: {
                    required: true,
                    number: true
                },
                billing_delivery: {
                    required: true
                },

                //=== Confirmation(step 4)
                accept: {
                    required: true
                }
            },

            //== Validation messages
            messages: {
                'account_communication[]': {
                    required: 'You must select at least one communication option'
                },
                accept: {
                    required: "You must accept the Terms and Conditions agreement!"
                } 
            },

            //== Display error  
            invalidHandler: function(event, validator) {     
                mUtil.scrollTop();

                swal({
                    "title": "", 
                    "text": "There are some errors in your submission. Please correct them.", 
                    "type": "error",
                    "confirmButtonClass": "btn btn-secondary m-btn m-btn--wide"
                });
            },

            //== Submit valid form
            submitHandler: function (form) {

            }
        });   
    }

    var initSubmit = function() {
        var btn = formEl.find('[data-wizard-action="submit"]');

        btn.on('click', function(e) {
            e.preventDefault();

            if (validator.form()) {
                //== See: src\js\framework\base\app.js
                mApp.progress(btn);
                //mApp.block(formEl); 

                //== See: http://malsup.com/jquery/form/#ajaxSubmit
                formEl.ajaxSubmit({
                    success: function() {
                        mApp.unprogress(btn);
                        //mApp.unblock(formEl);

                        swal({
                            "title": "", 
                            "text": "The application has been successfully submitted!", 
                            "type": "success",
                            "confirmButtonClass": "btn btn-secondary m-btn m-btn--wide"
                        });
                    }
                });
            }
        });
    }

    return {
        // public functions
        init: function() {
            wizardEl = $('#m_wizard');
            formEl = $('#m_form');

            initWizard(); 
            initValidation();
            initSubmit();
        }
    };
}();

jQuery(document).ready(function() {    
    WizardDemo.init();
});

我想知道是否有任何方法可以保持向导和验证正常工作，但可以通过一种方式为我为表单定义的操作进行共同提交。

标签： javascriptjqueryhtmlforms

解决方案

您只需要对initSubmit()函数稍作改动。

var initSubmit = function() {
    var btn = formEl.find('[data-wizard-action="submit"]');

    btn.on('click', function(e) {
        e.preventDefault();

        if (validator.form()) {
            //== See: src\js\framework\base\app.js
            mApp.progress(btn);
            //mApp.block(formEl); 

            //== See: http://malsup.com/jquery/form/#ajaxSubmit
            /*
            formEl.ajaxSubmit({
                success: function() {
                    mApp.unprogress(btn);
                    //mApp.unblock(formEl);

                    swal({
                        "title": "", 
                        "text": "The application has been successfully submitted!", 
                        "type": "success",
                        "confirmButtonClass": "btn btn-secondary m-btn m-btn--wide"
                    });
                }
            });
            */

            // Use this one instead:
            formEl.submit();
        }
    });
}

这只是意味着：如果验证结果是肯定的，而不是执行 AJAX 请求，只需执行正常提交即可。

这是jQuery的submit()方法的参考： https ://api.jquery.com/submit/

顺便说一句，这个问题可以在标题下找到（how to submit form using jQuery ?），例如看这个问题： Submit a form using jQuery

推荐阅读