Submit once a form

[jfquestiaux]

Hi Rob,

I would like to use the submitonce.js script I found on another thead :

//class name needs to be the same as the file name
var submitonce = new Class({

    initialize: function(form)
    {
        this.form = form; //the form js object
    },
    
    //called when a repeat group is duplicated
    onSubmit: function(event){
        $('fabrikSubmit'+this.form.id).disabled = true;
        $('fabrikSubmit'+this.form.id).value = 'Now saving....';
    }
});

but I understand that now there is no more "run js" plugin in F3.
I guess it is not as easy as to record the above code in components/com_fabrik/js/X.js, so can you give me some pointers ?
Thanks.

 

[rob]

//////////////////////////////////////////////////////////////
///////// FABRIK 3.0 VS 2.X README! ///////////////////
//////////////////////////////////////////////////////////////

we've changed the way form JS is handled in fabrik3.0
This plug-in no longer is supported, instead add event
listeners in components/com_fabrik/js/X.js
where X is your form id.
Alternatively write your js inside your form templates.
Below is a brief explanation of the changes:

//////////////////////////////////////////////////////////////

window.addEvent(fnc, function(form){
    
})

//possible options for fnc (passed in variables shown in square brackets)

/*
* 'fabrik.form.doelementfx' [form]
* 'fabrik.form.groups.save' [form]
* ''fabrik.form.groups.save.start' [form]
* 'fabrik.form.groups.save.end'[form, json]
* 'fabrik.form.group.delete' [form, event]
* 'fabrik.form.group.delete.end', [this, event, groupd, repeatCounter]
* 'fabrik.form.group.duplicate' [form, event]
* 'fabrik.form.submit.start' [form, event, button]
* 'fabrik.form.submitted' [form, json to update] (only called when form is saving using ajax)
* 'fabrik.form.submit.end' [form]
* 'fabrik.form.update' [form, json]
* 'fabrik.form.reset' [form]
*/

/*
* to stop the form from continuing its current method set the form's result property to false:
* E.g. this will stop the form from being submitted.
*/

window.addEvent('fabrik.form.submit.start', function(form, event, button){
    alert('aha! you really should not press that button');
    form.result = false;    
})

for your example this should work:

[/FONT]window.addEvent('fabrik.form.submit.start', function(form, event, button){
  button.disabled = true;
  button.value = 'Now saving....';
}

 

[jfquestiaux]

Well thanks, but I am afraid that when it comes to JS, I still need more than pointers...

Anyway, maybe I got it : I write this code :

window.addEvent('fabrik.form.submit.start', function(form, event, button){
  button.disabled = true;
  button.value = 'Now saving....';
}

//class name needs to be the same as the file name
var submitonce = new Class({

    initialize: function(form)
    {
        this.form = form; //the form js object
    },
    
    //called when a repeat group is duplicated
    onSubmit: function(event){
        $('fabrikSubmit'+this.form.id).disabled = true;
        $('fabrikSubmit'+this.form.id).value = 'Now saving....';
    }
});

and I save this in components/com_fabrik/js/X.js ?

 

[rob]

perhaps I wasn't clear

create a X.js file where X is your form's id.
Add this code:

[FONT=monospace]
[/FONT]window.addEvent('fabrik.form.submit.start', function(form, event, button){
  button.disabled = true;
  button.value = 'Now saving....';
}[FONT=monospace]
[/FONT]

there's no need to add the class now.

What happens now in Fabrik is at various places we do:

window.fireEvent('fabrik.function.name', [args]);

so any function you assigned to 'fabrik.function.name' via window.addEvent is called.

For an in depth read this blog post gave me the inspiration:
http://keetology.com/blog/2010/10/01/modules-and-callbacks-going-hollywood-with-mootools