Multiform with several submit

Need Help
#1

Hi,
I am trying to create a frontend multi step form. The first step is basic input information but the second step is actually using a search function to get data from db.
The issue I have is when I am submitting my search by clicking on the search button this validates the whole form and not only the search part.
Is there a documentation or a snippet example that available for this?
Thank you for your time.

#2

Hi,

try data attributes ajax request on your search button.

#3

Hello,
Thank you for your message. I actually already use attributes but this does not solve the submit issue.

#4

And what are you using a component from a plugin or template twig in the editor?

#5

I am using a component from a plugin. From my understanding the issue comes from using two form openers i am basically doing:

<!-- Global registration form opening. -->
 <form data-request="onRegister">
<!--my basic registration inputs. -->
<form data-request="onSearch">
<!--search data through external api to help fill some fields. -->
</form>
</form>
#6 
<?php namespace YourNamespace\MultiStepForm\Components;

use Cms\Classes\ComponentBase;
use Input;
use Session;
use Redirect;

class MultiStepForm extends ComponentBase
{
    public function componentDetails()
    {
        return [
            'name'        => 'MultiStepForm Component',
            'description' => 'Handles multi-step form submission'
        ];
    }

    public function onRun()
    {
        // Initialize steps
        $this->page['step'] = Session::get('form_step', 1);
        $this->page['form_data'] = Session::get('form_data', []);
    }

    public function onNextStep()
    {
        $step = Session::get('form_step', 1);
        $formData = Session::get('form_data', []);

        // Merge posted data
        $formData["step{$step}"] = Input::all();

        // Update session data
        Session::put('form_data', $formData);

        // Increase step
        Session::put('form_step', ++$step);

        // Check if it's the last step
        if ($step > 3) {
            // Handle final submission, save to database, etc.
            // Reset session data
            Session::forget('form_step');
            Session::forget('form_data');
            return Redirect::to('/confirmation');
        }

        $this->page['step'] = $step;
        $this->page['form_data'] = $formData;
    }
}


#components/multistepform
<div id="multi-step-form">
    {% if step == 1 %}
        <h2>Step 1</h2>
        <form data-request="onNextStep">
            <label for="name">Name:</label>
            <input type="text" name="name" id="name" required>

            <button type="submit">Next</button>
        </form>
    {% elseif step == 2 %}
        <h2>Step 2</h2>
        <form data-request="onNextStep">
            <label for="email">Email:</label>
            <input type="email" name="email" id="email" required>

            <button type="submit">Next</button>
        </form>
    {% elseif step == 3 %}
        <h2>Step 3</h2>
        <form data-request="onNextStep">
            <label for="phone">Phone:</label>
            <input type="text" name="phone" id="phone" required>

            <button type="submit">Submit</button>
        </form>
    {% endif %}
</div>
1 Like
#7

Thanks a lot I get the idea however from my understanding ajax request can only update partials thus each of my step should be in a dedicated partial. Can you confirm my understanding?