jFormer Documentation → Form Features →

Triggers

Triggers are a form feature that are implemented on the component level. they allow custom Javascript to be executed when a component is changed

Usage

Sample Usage

Triggers are an option in a components option array and accepts a Javascript function, this may be an anonymous function or a call to declared function :

	triggerFunction => 'function () { return true; } '

Trigger Example

Demo
View Source

trigger-example.php

require_once($_SERVER['DOCUMENT_ROOT'].'/php/site.php');

    // Create the form
    $jFormer = new JFormer('triggerFormExample', array());

    // Create the form page
    $jFormPage1 = new JFormPage($jFormer->id.'Page', array(
        'title' => 'Triggers Demo'
    ));

    // Create the form section
    $jFormSection1 = new JFormSection($jFormer->id.'Section1', array());

    // Add components to the section
    $jFormSection1->addJFormComponentArray(array(
        new JFormComponentSingleLineText('valueOne', 'Value 1:', array(
            'validationOptions' => array('integer'),
            'initialValue' => 0,
            'triggerFunction' => 'addValues();'
        )),
        new JFormComponentSingleLineText('valueTwo', 'Value 2:', array(
            'validationOptions' => array('integer'),
            'initialValue' => 0,
            'triggerFunction' => 'addValues();'
        )),
        new JFormComponentSingleLineText('valueThree', 'Value 3:', array(
            'validationOptions' => array('integer'),
            'initialValue' => 0,
            'triggerFunction' => 'addValues();'
        )),

        new JFormComponentSingleLineText('valueAdded', 'Sum of the values:', array(
            'disabled' => true,
            'sublabel' => 'This field is Disabled.',
            'initialValue' => 0
        )),
    ));

    /*
     * functions included in functions.js
     *
     * function addValues(){
     *      $('#totalEmployeeCount').val(returnNumber($('#officerCount').val())+returnNumber($('#clericalEmployeeCount').val())+returnNumber($('#proffesionalEmployeeCount').val()));
     * }
     *
     * function returnNumber(input){
     *     if( (input - 0) == input && input.length > 0) {
     *         return parseInt(input, 10);
     *     } else {
     *         return 0;
     *     }
     * }
     *
     */

    // Add the section to the page
    $jFormPage1->addJFormSection($jFormSection1);

    // Add the page to the form
    $jFormer->addJFormPage($jFormPage1);

// Set the function for a successful form submission
function onSubmit($formValues) {
    return array(
        'failureHtml' => json_encode($formValues),
    );
}

// Process any request to the form
$jFormer->processRequest(true);

Next Section: Tutorials

This page was last edited on January 22, 2010 at 2:28pm.

6 comments (add a comment)

nani on 2011-10-22 06:19:35

Hello,
Question is, how is possible through a triggerFunction jFormer, displays of various forms depending on the selection in a dropdown?

CK on 2011-11-02 11:58:08

I have the same question nani. I need the jFormer to dynamically generate more parts to a jFormer section. I'm not sure this is possible. I'll let you know if I hack anything together.

CK on 2011-11-08 14:15:01

Okkk. I have a solution...not very elegant but it works.

So my form has the following setup:
A JFormerSection that is instanced
A JFormerComponentSingleLineText that is instanced within the section

Now. The first part of my section has a DROPDOWN which sets a type of question, once the type is set to a particular value I want the singleLineText instance to show up. Otherwise, hide it. Here's the jsFunction I'm using.

jsFunction =>
"$('#' $(this).attr('id') '-wrapper').parent().children().children('.jFormComponentDropDown').val().indexOf('multi') >= 0"

Since the singleLineText is in the section we need to get to the container that is created. There is a <div> that is created from ANY component or section with the ID of the component/section 'wrapper'. Now. Since we now have the parent wrapper (the section), we need to look at the children <div>'s for the components in the section, then we need to find the CHILD of THOSE div's (which are containers for the component, the component itself is an <input>) which has the class .jFormComponentDropDown (you could also search by ID, but since drop down is instanced I want it to ALWAYS grab the child in the current section.

Sorry, if you get lost, just message me, it took me hours to figure this out with firebug and a lot of reading about eval().

CK on 2011-11-08 14:15:53

LOL Apparently the comments on this page allow for HTML so I just broke everything. Hilarious.

CK on 2011-11-08 14:17:10

Fixed:
<pre>
So my form has the following setup:<br />
A JFormerSection that is instanced<br />
A JFormerComponentSingleLineText that is instanced within the section<br />
<br />
Now. The first part of my section has a DROPDOWN which sets a type of question, once the type is set to a particular value I want the singleLineText instance to show up. Otherwise, hide it. Here's the jsFunction I'm using.<br />
<br />

jsFunction => <br />
"$('#' $(this).attr('id') '-wrapper').parent().children().children('.jFormComponentDropDown').val().indexOf('multi') >= 0"<br />
<br />
Since the singleLineText is in the section we need to get to the container that is created. There is a <div> that is created from ANY component or section with the ID of the component/section 'wrapper'. Now. Since we now have the parent wrapper (the section), we need to look at the children <div>'s for the components in the section, then we need to find the CHILD of THOSE div's (which are containers for the component, the component itself is an <input>) which has the class .jFormComponentDropDown (you could also search by ID, but since drop down is instanced I want it to ALWAYS grab the child in the current section.<br />
<br />
Sorry, if you get lost, just message me, it took me hours to figure this out with firebug and a lot of reading about eval().</pre>

Francesco Dimech on 2011-12-23 17:39:58

CK, I don't understand exactly what I have to do ;/ Can you please help me?

I have a dropdown which is populated via an array as so:

query = "SELECT * FROM course";
$resultset = $db->query($query);

$coursearray = array();

array_push($coursearray, array ('value' => '','label' => ' - Select an Option - ','disabled' => true,'selected' => true));

while ($row = mysql_fetch_array($resultset))
{
array_push($coursearray, array ('value' => $row["course_ID"], 'label' => $row["HND in 3D Design"],));
}

And I set the dropdown component to read the array as so:

$jFormSection1->addJFormComponentArray(array(

new JFormComponentDropDown('courseSelect', 'Course:', $coursearray,
array(
'validationOptions' => array('required'),
'initialValue' => '',
'triggerFunction' => 'selectedValue();'
)),

));

Now what I want is that once the user selects the first dropdown, a second dropdown is displayed with the corresponding values.

So what the function will do is that the user selects a course and then display a dropdown with the students having the corresponding course id selected.

How do I set the selected value in the function and how do I display the above?

Any help? Thx and Happy Holidays!

Triggers

Usage

Sample Usage

Trigger Example

Triggers Demo

Triggers Demo

Add a Comment