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">© 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">© 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