Using Components > Creating forms using components > Using the data to navigate and display the form pages |  |

Using the data to navigate and display the form pages

The Next and Previous buttons you create to navigate a multipage form need to contain actions to take the user to the correct page and display the page using the data entered by the user. The code for a Previous button returns the user to the previous page and displays the page with the information entered. The code for a Next button takes the user to the next page.

The `onClick` handler in the first frame of the Actions layer defines the actions for the Next and Previous push buttons on all of the form pages. The handler uses `if` and `else if` statements to determine which push button is currently being released, and specifies the appropriate navigation action. The navigation actions call the `getDataFromUI` function, discussed in Managing and monitoring the data. The `onClick` function is specified for the Click Handler parameter on the Parameters tab of the Property inspector for each push button instance.

In the example below, the `onClick` handler is used to navigate the pages in the form:

    function onClick(btn)
    {
    if ( btn == pg1next ) {

    // next button on page 1
    	getDataFromUIPg1();//get data from UI components on page 1
    	gotoAndStop("pg2");// go to pg 2
    } else if ( btn == pg2prev ) {

    // prev button on page 2
    	getDataFromUIPg2();// get data from UI components on page 2
    	gotoAndStop("pg1");//go to pg 1
    } else if ( btn == pg2next ) {

    // next button on page 2
    	getDataFromUIPg2();//get data from UI components on page 2
    	gotoAndStop("pg3");//go to pg 3
    } else if ( btn == pg3prev ) {

    // prev button on page 3
    	getDataFromUIPg3();//get data from UI components on page 3
    	gotoAndStop("pg2");// go to pg 2
    }
    }

The `onChange` handler in frame 1 of the Actions layer defines the actions for the check box instance on page 2 of the form. This is an example of a component controlling the enabled state of another component. The check box is selected by default. If the user leaves the check box selected, the list box allows the user to make selections. If the user deselects the check box, the list box is disabled. The `onChange` function is specified for the Change Handler parameter on the Parameters tab of the Property inspector for the check box instance.

In the example below, the `onChange` handler is used to navigate the pages in the form:

    function onChange(control)
    {
    if ( control == junkCheck_mc ) {
    // enable and disable the list box based on check box value
    	interest_mc.setEnabled(junkCheck_mc.getValue());
    }
    }