1

I am writing a website with forms on php. The problem arose when sending data from the second form, which changes due to the action hiding the previous form using the jQuery.

after sending from the second form, which was dynamically replaced, the data is not sent, but only the page is updated and the action_index is triggered, which build a page based on cookies.

why is the page refreshed and data not sent the first time?

ajax.js

$('.form-signin').submit(function(e){
    console.log($(this).attr("id"));
    e.preventDefault();
    $.post(
        'main/ajax', // адрес обработчика
         $(".form-signin").serialize(), // отправляемые данные          

        function(msg) { // получен ответ сервера  
            $('.form-signin').slideUp('slow').remove();
            $('#result_form').html(msg);
        }
    );
    return false;
});

controller.php

...
function action_index()
    {   
            switch($_COOKIE['step']){
                case $this->FIRST_FORM:
                    $this->view->generate('main_view.php', 'template_view.php', $data);
                    break;
                case $this->SECOND_FORM:
                    $this->view->generate('next_view.php', 'template_view.php');
                    break;
                case $this->FINAL_PAGE:
                    $this->view->generate('finish_view.php', 'template_view.php');
                    break;  
    }
...
function action_ajax(){
        switch($_COOKIE['step']){

            case $this->FIRST_FORM:
                $result = array(
                    "firstname" => $_POST['firstName'],
                    "lastname" => $_POST['lastName']
                );
                $this->model->insert_user($result);
                setcookie("step", $this->SECOND_FORM, time()+30*24*60*60, '/');
                setcookie("id", $id, time()+30*24*60*60, '/');
                $newform = $this->model->get_form('next_view');
                echo $newform;
                break;

            case $this->SECOND_FORM:
                // Here should code run but it doesn't though cookie has already changed few strings above
                $id = $_COOKIE['id']
                $result = array(
                    "company" => $_POST['company'],
                    "photo" => NULL,
                    "id" => $_id
                );

                if(!empty($_FILES['photo']['name'])) {
                    $image = $_FILES['photo']["name"]; 
                    $imgContent = addslashes(file_get_contents($image)); 
                    $result['photo'] = $imgContent;
                }


                $this->model->update_user($result);
                $newform = $this->model->get_form('finish_view');
                setcookie("step", $this->FINAL_PAGE, time()+30*24*60*60, '/');
                break;
        }

main_view.php

<form id="mainform" class="form-signin" method="POST">
    <h1 class="h3 mb-3 font-weight-normal">Registration</h1>
    <input type="text" name="firstName" id="inputFirstName" class="form-control" placeholder="First Name" required autofocus>
    <input type="text" name="lastName" id="inputLastName" class="form-control" placeholder="Last Name" required>
    <button class="btn btn-lg btn-primary btn-block" type="submit">Next</button>
    <p class="mt-5 mb-3 text-muted">&copy; 2020</p>
</form>
<div id="result_form"></div>

next_view.php

<form id="mainform" class="form-signin" method="POST">
<h1 class="h3 mb-3 font-weight-normal">Few steps to continue</h1>
    <h3 class="h5 mb-3 font-weight-normal">Please, fill in the form below to finish the registration</h1>
    <input type="text" name= "company" id="inputCompany" class="form-control" placeholder="Company" required autofocus>
    <input type="file" name="photo" id="inputFile" accept="image/jpg,image/x-png,image/gif,image/jpeg" class="form-control" placeholder="Photo">
    <button class="btn btn-lg btn-primary btn-block" type="submit">Register</button>
    <p class="mt-5 mb-3 text-muted">&copy; 2020</p>
</form>
<div id="result_form"></div>

UPD Replaced ajax.js with this code $(document).on("submit", ".form-signin", function() .., now it's works fine

rawrawit
  • 11
  • 2
  • Do you call `$('.form-signin').submit(` *before* you create your second form? Looks like it. Change to `$(document).on("submit", ".form-signin", function() ...` as jquery events using the first format only apply to elements that exist at that time while the 2nd format applies to dynamically added elements. – freedomn-m Jun 18 '20 at 16:09
  • @freedomn-m Thanks a lot! This is solved my issue – rawrawit Jun 18 '20 at 16:21

0 Answers0