ZF2-Form submission without reloading the page in the modal itself as shown in picture

Question

I want to submit this form without reloading the page (inside the modal itself).After validating form it should redirect to the desired page not after form posting. note: I do not want to use AJAX thank you. Here is the Image:

here is what i have tried..

     public function listAction()
{
    if(!$user = $this->identity())
        return $this->redirect()->toRoute('user',array('action'=>'login'));
    $em = $this->getEntityManager();

    $survey = new Survey();
    $form = new SurveyForm();
    $message="Create Survey";
    $surveyList = $em->getRepository('Easysurvey\Entity\Survey')->findall();

    $form->get('submit')->setValue('Save & Add Question');

    $form->setHydrator(new DoctrineHydrator($em,'Easysurvey\Entity\Survey'));
    $form->bind($survey);

    //add new       
    $request = $this->getRequest();
    if ($request->isPost()) {
        $data = $request->getPost();

            $form->setInputFilter(new SurveyFilter($this->getServiceLocator()));
            $form->setData($data);

            if ($form->isValid()) {
                $this->prepareData($survey);

                $this->flashMessenger()->addSuccessMessage('succesfully created');
                $em->persist($survey);
                $em->flush();

                    return $this->redirect()->toRoute('survey', array('action' => 'list'));
            }
        }
    }
    return array('form' => $form,
                    'surveyList' => $surveyList,
                        'message' => $message

    );
}

list.phtml:

                                <!-- Create Modal -->
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg">
       <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel"><?php echo $message?></h4>
        </div>
        <div class="modal-body">
            <?php
                $form->setAttribute('action', $this->url('survey', array('action' => 'list')),'class','form-horizontal');
                $form->prepare();

                echo $this->form()->openTag($form);
                echo $this->formHidden($form->get('id'));
                echo $this->formRow($form->get('name'));
                echo '<br />';
                echo $this->formRow($form->get('description'));
                echo '<br />';
                echo $this->formRow($form->get('startdate'));
                echo '<br />';
                echo $this->formRow($form->get('enddate'));
                echo '<br />';
                echo $this->formRow($form->get('createdby'));
                echo '<br />';
                echo $this->formSubmit($form->get('submit'));
                echo $this->form()->closeTag();
            ?>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close </button>
        </div>
    </div>
</div>

Answer 1

You need javascript for that, Jquery make ajax calls really simple, basically:

To get the url: $('form.form-horizontal').attr('action');

Then on the callback which is a function called after the request is executed, you hide the bootstrap modal and optionally show a success message to the end user.

$.ajax()