Multi-step form with "steps" component

[anayrat]

Hello,
I wonder how we could add the "steps" component in the multi-step form example : https://sql.ophir.dev/examples/multistep-form/

I want to do something like:

• Step 1: Fill the form
• Step 2: send a query to the database to check if the record already exist
• Step 3: Validation step "are you sure to add this record?"
• Step 4: insert the record in the database

I think I could create a separate page for each step, but I am looking for something more elegant :)

I also wonder if it could be possible to have the active step in the top-level part:

For example:

select 
    'steps'  as component,
    TRUE     as counter,
    'purple' as color,
   $step_id as active;
select 
    'Registration form' as title,
    'forms'             as icon,
    'https://github.com/lovasoa/sqlpage' as link,
    'Initial account data creation.' as description;
select 
    'Email confirmation'    as title,
    'mail'                  as icon,
    'https://sql.ophir.dev' as link,
    'Confirm your email by clicking on a link in a validation email.' as description;
select 
    'ID verification' as title,
    'Checking personal information' as description,
    'user'            as icon,
    '#'               as link;
select 
    'Final account approval' as title,
    'ophir.dev'              as description,
    'https://ophir.dev/'     as link,
    'eye-check'              as icon,
select 
    'Account creation' as title,
    'check'            as icon;

We could send a step_id parameter to active a step.

[lovasoa]

You could use the step component like this

select 
    'steps' as component;
select 
    'Fill the form' as title,
    '?step=1' as link,
    $step = 1 as active;
select 
    'Confirmation' as title,
    $step = 2 as active;
select 
    'Done' as title;

[anayrat]

Thanks, it is smart :)
How I can do the step 2 that is basically:

• check is the account exists
• If not => insert the record
• If yes redirect to another page ?

[lovasoa]

You éboulé be able to do that in a single statement: insert ... on conflict do nothing ... returning case when ...

[anayrat]

Thanks for your answers. I was able to create a multi-step form :)
I am writing a wifi management application for unify hotspot :)
I hope I will be able to release it as a new example for SQLPage

[lovasoa]

Sounds cool! Can't wait to see it :)

[YunusMechery]

@anayrat also try #628