Custom script for forms

If you want to use your own script in form pages and/or dialogs, add the xsforms Javascript object to “Form pages script (53)” in the code editor.

Related articles

• Using the code editor
• Infradox customisation
• Custom script for the HTTP uploader

Script for your forms

The xsforms object is supported in Flex only.

The Javascript object “xsforms” object has just two methods, the most important one is the init() method. In this method/function you can return a custom handler object for specific form. The custom handler objects can have a number of methods, all are optional – i.e. you only have to add the methods that you need. You can of course also add your own functions and you can then call those from any of the standard methods described below.

init(n)

This is the initialization function that is called when a page or dialog containing a form loads. The parameter “n” is the id of the form. If xsforms exists, it will be called for every form, use the “n” parameter in your script to handle specific forms. For example, the value of “n” will be “contactusform” if called from the Contact page, or “quoteform” if called from the Quote dialog.

aftersendmail(d)

The only other method that you can add to xsforms is “aftersendmail”. If it exists, this method is called after the form’s properties have been posted (not all forms use a function that sends an e-mail).

If the form is an email form (e.g. the contact us page) then the function aftersendmail() is called after the form has been successfully posted. If you use this function, then the standard function is not executed. The variable “d” is the JSON object that is returned by the standard script.

Example:

var xsforms = {
init:function(n) {
var o=this;
o._formid=n;
...your code here...
},

aftersendmail: function(d) {
var o=this;
if(o._formid==="contactusform") {
...your code here...
}
}
};

If you want “aftersendmail” to be called when a Quote request is posted, you will have to make some changes to the “Previews script” in the code editor (template 86). Also note, that you can create a custom quote request dialog in the code editor if the standard version does not meet your requirements or if you want to use custom fields.

Find the object “xspreviewhandler” and its function “getquote”. This function has a callback handler for the submit function.
You can change it as shown below (the “success” function inside the “onsubmit” function):

"onsubmit":function(p){
$.ajax({
...
success: function(d){
var _done=false;
if(typeof xsforms !== typeof undefined) {
if($.isFunction(xsforms.aftersendmail)) {
_done=true;
xsforms.aftersendmail(d);
}
}
if(!_done) {
xsmsg.alertbox((d.Result?xsflexdialog._success:xsflexdialog._err),function(){
xsflexdialog.hidedialog()
})
}
},
...
});
}

And then you’ll have to change the “aftersendmail” function of the xsforms object to handle the quoteform. For example:

var xsforms = {

init: function(n) {
var o=this, obj;
o._formid=n; // store the form id so that it can be read in "aftersendmail"
return obj; // is custom handler or undefined (undefined object means normal handling)
},

aftersendmail: function(d) {
// custom text after submitting contact and quote forms
var o=this;
switch(o._formid) {
case "contactusform":
$("#contactusform .dialogform").hide();
$(".text.container").html($("#afterpost").html());
break;
case "quoteform":
$("#quoteform .columnvolatile, #quoteform .outer").hide();
$("#quoteform #postsuccess").show();
break;
}
}
};

Custom form handlers

If you want to create a custom handler object, then add it to the Form pages script and return a handler to it from the xsforms.init() function. For example:

var xsforms = {
init: function(n) {
var o=this, obj;
o._formid=n;

switch(n) {
case "quoteform": obj=myquoteform; break;
}

return obj; // is custom handler or undefined (undefined object means normal handling)
}
};

var myquoteform = {
oninit: function() {
...your code here...
}
};

Below is an overview of the functions that you can add to your handler object.

onbeforeinit()

This function is called after init() and before the standard form initialization function is called. The standard function e.g. initializes the input elements (date inputs, drop downs and so on), and it adds classes (required fields) based on the forms settings that you have configured in back office.

oninit()

This function is called after “onbeforeinit”. You can use it to e.g. manipulate inputs and classes after the normal initialization has completed.

onvalidate()

If “onvalidate” exists, this function is called before the standard input validation function. You can return false to prevent the form from being submitted, you must return true to make sure that the rest of the functions are called (or else the form will not be submitted). Note that the standard form validation function is called after your own validation function – provided that you return true to indicate that the form may be submitted.

onaftervalidate()

This function is called after form validation has completed but only if the form is ready to be submitted, i.e. if validation was successful. Return true to submit the form or false to prevent the form from being submitted.