多次提交多步骤模态

Question

我正在创建一个Prestashop模块，该模块基本上是用于预订的多步骤模式，提交后以电子邮件的形式发送。问题在于，模态的最后一步需要是概述，如果不提交和刷新页面（关闭模态），我就无法可视化用户输入。我在模态中调用了prestashop属性，因此用户可以在其中进行选择和编辑。

我正在使用此https://github.com/ngzhian/multi-step-modal（带有后退按钮的进度栏）。我有5个步骤-当前最重要的步骤是您在其中选择属性的步骤-步骤4，并在其中看到了概述并发送电子邮件的步骤-步骤5。

如果您检出链接，您将看到在页脚中有用于浏览模式步骤的按钮。我所拥有的是这个：

<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary step step-2" data-step="2" onclick="sendEvent('#demo-modal-3', 1)">Back
    </button>
    <button type="button" class="btn btn-primary step step-1" data-step="1" onclick="sendEvent('#demo-modal-3', 2)">Next
    </button>
    <button type="button" class="btn btn-primary step step-3" data-step="3" onclick="sendEvent('#demo-modal-3', 2)">Back
    </button>
    <button type="button" class="btn btn-primary step step-2" data-step="2" onclick="sendEvent('#demo-modal-3', 3)">Next
    </button>
    <button type="button" class="btn btn-primary step step-4" data-step="4" onclick="sendEvent('#demo-modal-3', 3)">Back
    </button>
    <button type="button" class="btn btn-primary step step-3" data-step="3" onclick="sendEvent('#demo-modal-3', 4)">Next
    </button>
    <button type="button" class="btn btn-primary step step-5" data-step="5" onclick="sendEvent('#demo-modal-3', 4)">Back
    </button>
    <button type="submit" class="btn btn-primary step step-4" data-step="4" onclick="sendEvent('#demo-modal-3', 5)">Next
    </button>
    <button class="btn btn-primary step step-5" data-step="5" type="submit" name="button_pressed_reservation">Reserve
    </button>
</div>

现在，当您查看最后一个“下一步”按钮时，您会注意到它的类型为“ submit”。这样会重新加载页面并关闭模式，但是如果未提交表单，则不会显示用户输入。

我需要做的是提交模态2次而不关闭它，因此我可以在概述中显示用户输入的变量。例如，在模态的第五步中，我显示了聪明的变量，如下所示：

<div id="overview" class="modal-body step-5" data-step="5">
    <label>{$adults_reservation}</label>
    <br>
    <label>{$children_reservation}</label>
    <br>
    <label>{$customer_message_reservation}</label>
    <br>
    <label>{$customer_name_reservation}</label>
    <br>
    <label>{$customer_mail_reservation}</label>
    <br>
    <label>{$customer_phone_reservation}</label>
    <br>
</div>

在第一次提交之后，我需要再次提交表单，以便将其作为电子邮件发送。

注意：

我在第4步中调用了prestashop属性，如下所示：

<div class="modal-body step-4" data-step="4">
    <div id="step-4-attributes">
        {foreach from=$groups key=id_attribute_group item=group} {if !empty($group.attributes)}
        <div class="clearfix product-variants-item">
            <span class="control-label">{$group.name}</span> {if $group.group_type == 'select'}
            <select class="form-control form-control-select" id="group_{$id_attribute_group}" data-product-attribute="{$id_attribute_group}" name="group[{$id_attribute_group}]">
                {foreach from=$group.attributes key=id_attribute item=group_attribute}
                <option value="{$id_attribute}" title="{$group_attribute.name}" {if $group_attribute.selected} selected="selected" {/if}>{$group_attribute.name}</option>
                {/foreach}
            </select>
            {elseif $group.group_type == 'color'}
            <ul id="group_{$id_attribute_group}">
                {foreach from=$group.attributes key=id_attribute item=group_attribute}
                <li class="float-xs-left input-container">
                    <label>
                        <input class="input-color" type="radio" data-product-attribute="{$id_attribute_group}" name="group[{$id_attribute_group}]" value="{$id_attribute}" {if $group_attribute.selected} checked="checked" {/if}>
                        <span {if $group_attribute.html_color_code}class="color" style="background-color: {$group_attribute.html_color_code}" {/if} {if $group_attribute.texture}class="color texture" style="background-image: url({$group_attribute.texture})" {/if}><span class="sr-only">{$group_attribute.name}</span></span>

                        {/foreach}
            </ul>
            {elseif $group.group_type == 'radio'}
            <ul id="group_{$id_attribute_group}">
                {foreach from=$group.attributes key=id_attribute item=group_attribute}
                <li class="input-container float-xs-left">
                    <label>
                        <input class="input-radio" type="radio" data-product-attribute="{$id_attribute_group}" name="group[{$id_attribute_group}]" value="{$id_attribute}" {if $group_attribute.selected} checked="checked" {/if}>
                        <span class="radio-label">{$group_attribute.name}</span>
                    </label>
                </li>
                {/foreach}
            </ul>
            {/if}
        </div>
        {/if} {/foreach}
    </div>
</div>