1. User clicks button 1 in the form
  2. Validation of entered data
  3. If the check is successful -> animation of this form (switching to form 2)
  4. Click on button 2 and send data from two forms to the database.

How to do it? The third point I do not understand how to implement.

In addition, there is a problem here that the animation does not work normally if the button is in shape. If you press the button 3, the animation works. But if it is on the form (button 1) then the animation is interrupted.

Here are the forms themselves, handlers

<div id="formsss"> <div id="form_1"> <h3>Форма 1</h3><br> <form action="" method="POST"> <input name="input1" value="<?php echo $_POST['input1']; ?>"><br> <?php if ( isset($_POST['clicked_btn_1']) ) { $errors = array(); if (trim($_POST['input1'] == '')) { $errors[] = 'Заполните поле'; } if (R::count('test', 'input1 = ?', array($_POST['input1'])) > 0) { $errors[] = 'Такие данные уже есть в базе'; } if (empty($errors)) { // ПЕРЕКЛЮЧАЕМ НА ФОРМУ 2 } else { echo '<div style="color: red;">'.array_shift($errors).'</div>'; } } ?> <button id="btn_1" type="submit" name="clicked_btn_1">Кнопка 1</button> </form> </div> <div id="form_2"> <h3>Форма 2</h3><br> <form action="" method="POST"> <input name="input2" value="<?php echo $_POST[input2]; ?>"><br> <?php if ( isset($_POST['clicked_btn_2']) ) { $errors = array(); if (trim($_POST['input2'] == '')) { $errors[] = 'Заполните поле'; } if (R::count('test', 'input2 = ?', array($_POST['input2'])) > 0) { $errors[] = 'Такие данные уже есть в базе'; } if (empty($errors)) { // заносим в базу данные из двух форм $test = R::dispense('test'); $test->input1 = $_POST['input1']; $test->input2 = $_POST['input2']; R::store($test); } else { echo '<div style="color: red;">'.array_shift($errors).'</div>'; } } ?> <button id="btn_2" type="submit" name="clicked_btn_2">Кнопка 2</button> </form> </div> </div> <button id="btn_3" type="submit" name="clicked_btn_3">Кнопка 3</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> $('#btn_3').click(function(){ $('#formsss').toggleClass('flipped') }); </script>

css animation

 #form_2{ -moz-transform: rotateY(-180deg)scale(.1)translateY(-70px); -webkit-transform: rotateY(-180deg)scale(.1)translateY(-70px); -o-transform: rotateY(-180deg)scale(.1)translateY(-70px); transform: rotateY(-180deg)scale(.1)translateY(-70px); filter: alpha(opacity=0); opacity: 0; z-index: 1; } #form_2, #form_1 { -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -moz-transition: .6s; -webkit-transition: .6s; -o-transition: .6s; transition: 600ms 0ms; transition-delay: 0.1s; -o-transition-delay: 0.1s; -webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; } #form_2 { bottom: 20px; top: 359px; left: 20px; right: 20px; } #form_2, pre { position: absolute; } /*************************************************/ .flipped#formsss { overflow: hidden; } .flipped #form_1 { -moz-transform: rotateY(180deg)scale(.7); -webkit-transform: rotateY(180deg)scale(.7); -o-transform: rotateY(180deg)scale(.7); transform: rotateY(180deg)scale(.7); filter: alpha(opacity=0); opacity: 0; } .flipped #form_2 { -moz-transform: rotateY(0)scale(1); -webkit-transform: rotateY(0)scale(1); -o-transform: rotateY(0)scale(1); transform: rotateY(0)scale(1); filter: alpha(opacity=100); opacity: 1; z-index: 5; display: block; }
  • I would shoot for such a code on the spot. Spit in the face of someone who taught you to write like that in the 21st century. - Athari
  • @Squidward and how it is necessary? - Andrei Dinevich
  • To test the first button, use the ajax request to the database, then after the second form, you can perform php further or ajax. And the code looks awful to you. <input name = "input1" value = "<? php echo $ _POST [input1];?>" - where is this taught? o_o - noxom
  • You don’t have to push HTML and PHP into a single file as unreadable porridge, don’t write monstrous <?php echo and forget about escaping, don’t call the controls for noodles, don’t multiply the prefixes in CSS manually. And you have a complete misunderstanding of what is happening on the server and what is on the client. - Athari

1 answer 1

Hello.

Use the session. After filling in the first form, save the verified data to the session and proceed to the second step, in which you enter the data and, after successful verification, send the data from the session to processing.

 <?php session_start(); ?> <div id="formsss"> <? if(!isset($_SESSION['errors'])) { ?> <div id="form_1"> <h3>Форма 1</h3><br> <form action="" method="POST"> <input name="input1" value="<?php echo $_POST['input1']; ?>"><br> <?php if ( isset($_POST['clicked_btn_1']) ) { $errors = array(); if (trim($_POST['input1'] == '')) { $errors[] = 'Заполните поле'; } if (R::count('test', 'input1 = ?', array($_POST['input1'])) > 0) { $errors[] = 'Такие данные уже есть в базе'; } if (empty($errors)) { // ПЕРЕКЛЮЧАЕМ НА ФОРМУ 2, так как ошибок нет $_SESSION['errors'] = 1; $_SESSION['input1'] = $_POST['input1']; } else { unset($_SESSION['errors']); echo '<div style="color: red;">'.array_shift($errors).'</div>'; } } ?> <button id="btn_1" type="submit" name="clicked_btn_1">Кнопка 1</button> </form> </div> <? } if($_SESSION['errors']==1) { ?> <div id="form_2"> <h3>Форма 2</h3><br> <form action="" method="POST"> <input name="input2" value="<?php echo $_POST['input2']; ?>"><br> <?php if ( isset($_POST['clicked_btn_2']) ) { $errors = array(); if (trim($_POST['input2'] == '')) { $errors[] = 'Заполните поле'; } if (R::count('test', 'input2 = ?', array($_POST['input2'])) > 0) { $errors[] = 'Такие данные уже есть в базе'; } if (empty($errors)) { // заносим в базу данные из двух форм $test = R::dispense('test'); //$test->input1 = $_POST['input1']; $test->input1 = $_SESSION['input1']; $test->input2 = $_POST['input2']; R::store($test); unset($_SESSION['errors']); } else { $_SESSION['errors'] = 1; echo '<div style="color: red;">'.array_shift($errors).'</div>'; } } ?> <button id="btn_2" type="submit" name="clicked_btn_2">Кнопка 2</button> </form> </div> <? } ?> </div> <button id="btn_3" type="submit" name="clicked_btn_3">Кнопка 3</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> $('#btn_3').click(function(){ $('#formsss').toggleClass('flipped') }); </script>
  • in my opinion, the author needs to be through javascript - Alex78191
  • And why does he use substitution from the first form using PHP? - Vladimir
  • <? php echo $ _ POST [input 1]; ? > - Vladimir
  • and how to display the form in the animation? - Andrei Dinevich
  • I apologize for a typo in checking the conditions, there must be two equal signs. Your code is broken into two forms. You need to redo the check. You have a validation of the entered data is made inside the form that you have not yet completed and sent. And output the second form after checking for input data errors in the first form. The third button is outside the form and it makes no sense to specify the type of submit. Code corrected for your version. Maybe it will suit you. - Vladimir