Stop reload on submit form

Question

I have a form - at the end of a test with multiple questions - with an email input that send the result of this test to the email. If the page is refresh, the test is back to the beggining. So I would like the page doesnt reload after submiting the email input and the client can stay on the result page.

This is my form :

<form action="<?php echo $block->getBaseUrl().'eyetest/form/postmail/';?>" name="eyetestdata"
                          method="post" id="contactForm-1" data-hasrequired="<?php echo __('* Required Fields') ?>"
                          data-mage-init='{"validation":{}}'>
                        <fieldset class="fieldset">
                            <div class="field email required">
                                <div class="inputEmail">
                                    <input name="email" id="email" title="<?php echo __('Email') ?>" class="input-text"
                                           type="email" data-validate="{required:true, 'validate-email':true}"/>
                                </div>
                            </div>
                        </fieldset>

                        <input type="hidden" name="result_acuity" value="">
                        <input type="hidden" name="result_astigmatism" value="">
                        <input type="hidden" name="result_contrast" value="">
                        <input type="hidden" name="result_vision_lecture" value="">
                        <input type="hidden" name="result_vision_colors" value="">
                        <input type="hidden" name="result_colors" value="">
                        <input type="hidden" name="result_DLMA" value="">

                        <p class="errorInputMail"><?= __('Veuillez renseigner une adresse email valide.') ?></p>
                        <div class="eyetest-toolbar">
                            <button type="submit" class="submit ui button eyetest-button sendByMail"
                                    id="modalEmail_desktop">
                                <i class="fas fa-paper-plane"></i>
                                <?= __('Recevoir mes résultats par email') ?>
                            </button>
                        </div>
                    </form>

(Values of hidden input -that represents results of the test- are filled with javascript, don't mind it)

This is the execute function of the postmail controller :

public function execute()
    {
        $email = (string)$this->getRequest()->getPost('email');
        $result_acuity = $this->getRequest()->getPost('result_acuity');
        $result_astigmatism = $this->getRequest()->getPost('result_astigmatism');
        $result_contrast = $this->getRequest()->getPost('result_contrast');
        $result_vision_lecture = $this->getRequest()->getPost('result_vision_lecture');
        $result_vision_colors = $this->getRequest()->getPost('result_vision_colors');
        $result_colors = $this->getRequest()->getPost('result_colors');
        $result_DLMA = $this->getRequest()->getPost('result_DLMA');

        $name = $this->getRequest()->getPost('name');

        try {
            $this->_inlineTranslation->suspend();

            $sender = [
                'name' => 'random_name',
                'email' => 'random_mail@hotmail.com'
            ];

            $sentToEmail = $this->_scopeConfig ->getValue('trans_email/ident_general/email',\Magento\Store\Model\ScopeInterface::SCOPE_STORE);

            $sentToName = $this->_scopeConfig ->getValue('trans_email/ident_general/name',\Magento\Store\Model\ScopeInterface::SCOPE_STORE);

            $transport = $this->_transportBuilder
                ->setTemplateIdentifier(132)
                ->setTemplateOptions(
                    [
                        'area' => 'frontend',
                        'store' => $this->storeManager->getStore()->getId()
                    ]
                )
                ->setTemplateVars([
                    'email' => $email,
                    'result' => $this->resultText(
                        $result_acuity,
                        $result_astigmatism,
                        $result_contrast,
                        $result_vision_lecture,
                        $result_vision_colors,
                        $result_colors,
                        $result_DLMA
                    )
                ])
                ->setFrom($sender)
                ->addTo($email, $name)
                ->addTo($sentToEmail,$sentToName)
                ->addTo('email@email.com','owner')
                ->getTransport();

            $transport->sendMessage();

            $this->_inlineTranslation->resume();
            $this->messageManager->addSuccess('Vos résultats vous ont bien été envoyés par mail.');
          //$this->_redirect('eyetest');

        } catch (\Exception $e) {
            $this->messageManager->addError($e->getMessage());
            $this->_logLoggerInterface->debug($e->getMessage());
            exit;
        }
    }

Thanks for any response anyone could bring me :)

Answer 1

Reload of the page is prevented by performing the POST action via AJAX. Here are some resources that might help you with this.

1. Magento 2: How to send data using Ajax form in custom form?
2. https://www.codextblog.com/magento-2/how-to-render-an-html-using-an-ajax-call-in-magento-2-module/