Forms. How to make a form as a step master

Example of a master with step-by-step form filling

To do this, we use a special snippet (as-form-master) in the custom layout of the form.

<div class="as-form-master hide">
    <div class="as-form-masterProgress"></div>
    <div class="as-form-step" data-step="1" data-title="Step 1" data-icon="fa-user">
        <h1>Text 1</h1>

        <a href="#" class="as-form-stepPrev btn btn-outline-primary"><i class="fa fa-chevron-left">
		</i></a>
        <a href="#" class="as-form-stepNext btn btn-outline-primary"><i class="fa fa-chevron-right">
		</i></a>
    </div>
    <div class="as-form-step" data-step="2" data-title="Step 2" data-icon="fa-edit">
        <h1>Text 2</h1>

        <a href="#" class="as-form-stepPrev btn btn-outline-primary"><i class="fa fa-chevron-left">
		</i></a>
        <a href="#" class="as-form-stepNext btn btn-outline-primary"><i class="fa fa-chevron-right">
		</i></a>
    </div>
    <div class="as-form-step" data-step="3" data-title="Step 3" data-icon="fa-file">
        <h1>Text 3</h1>
        <a href="#" class="as-form-stepPrev btn btn-outline-primary"><i class="fa fa-chevron-left">
		</i></a>
        <a href="#" class="as-form-stepNext btn btn-outline-primary"><i class="fa fa-chevron-right">
		</i></a>
    </div>
</div>

To check the steps we use a special callback on the page:

$(function(){
    as.form.callbacks['newConcept_checkStep1'] = function(){
        var res = $('.as-form-item[data-code=customers] textarea').val()!=="";
            if(!res) as.sys.bootstrapAlert("Enter a description of the target audience",
    {type: 'warning', delay: 6000});
    return res;
}
});

Callback name - {formCode}_checkStep{stepNum}

If it returns true, it skips to the next step. If false, it does not allow you to go to another step of the master.

Note:

  1. You can remove the Back button at step 1 and replace the Forward button with the {form-button} and {button-result button at the last step}.
Falcon Space is a functional web development platform on a narrow stack MS SQL/Bootstrap. Falcon Space Gettting started
{sp-shortDemostandLinks}

SQL-tool for creating personal accounts on the site

The essence of the approach and the history of the creation of Falcon Space
Web platform for creating personal accounts

Falcon Space Platform

This is a reduction in the cost of ownership

at the expense of fewer people to support

This is a quick change

while using the program

This is a modern interface

full adaptation for mobile devices

MS SQL web applications. Affiliate program for developers and web studios

You can develop on your own or collaborate with us on Falcon Space web development using only SQL and HTML.
See examples with SQL code
Platform documentation
Working on MS SQL Server
Note