Question

我创建了一个处理html表单加载和提交的类。见下面的代码

ND.Form = new Class({
    //--- Implements options og events.
    Implements: [Options, Events],

    //--- Options.
    options: {
        url: '',
        injectTo: ''
    },

    //--- Initialize the class.
    initialize: function (panel, options) {
        //--- Set options
        this.setOptions(options);
        this.panel = panel;
        this.loadForm();
    },

    loadForm: function () {
        var req = new Request.HTML({
            url: this.options.url,
            method: 'get',
            onSuccess: function (html) {
                $(this.options.injectTo).empty();
                $(this.options.injectTo).adopt(html);
                var formId = $(this.options.injectTo).getFirst('form').get('id');
                $(formId).addEvent('submit', function (e) {
                    e.stop();
                    this.submitForm(formId);
                } .bind(this));
            } .bind(this)
        }).send();
    },

    submitForm: function (formId) {
        $(formId).set('send', {
            onSuccess: function (resp) {
                this.panel.loadContent();
                if (resp != null) {
                    $('lbl_error').empty();
                    $('lbl_error').setStyles({ 'display': 'block', 'color': 'red' }).set('html', resp);
                }
            }.bind(this),

            onFailure: function (resp) {
                if (resp != null) {
                    $('lbl_error').empty();
                    $('lbl_error').setStyles({ 'display': 'block', 'color': 'red' }).set('html', resp);
                }
            }
        });
        $(formId).send();
    }
});

这一切都运行正常，当我按下保存按钮而不是“this.panel.loadContent（）;”时在“submitForm：function（formId）”中，按下按钮的次数相同x，我该如何防止这种情况？

/马丁

Answer 1

Basically we need to do three things:

在提交按钮上收听“点击”事件。
停止提交表单。
使用$（formElement）.send（）

解决方案看起来像这样：

$('submit').addEvent( 'click', function(evt){
     // Stops the submission of the form.
     new Event(evt).stop();

     // Sends the form to the action path,
     // which is 'script.php'
     $('myForm').send();
    } );

Answer 2

从mootools 1.3“set（'send'）”开始添加另一个事件。所以你需要写：

$('myForm').set('send', {
    onSuccess: function (html) {},
    onFailure: function(xhr){}
}).addEvent('submit', function(e){
    e.stop();
    this.send();
});

而不是：

$('myForm').addEvent('submit', function(e){
    e.stop();
    this.set('send', {
        onSuccess: function (html) {},
        onFailure: function(xhr){}
    });
}).send();

然后，每当您处理表格时，只会发送一次请求。

Answer 3

我使用了request.send（）方法但谷歌搜索试图找到一种方法来复制用户点击表单提交按钮的操作，但同时也允许预先执行一些javascript逻辑。我没有在专门针对此问题的讨论中找到任何内容。我找到的答案是使用form.submit（）方法。

使用mootools提交表单

3 个答案: