Изменение страницы с использованием Ajax, все еще сохраненные данные введены

Question

Я пишу веб-сайт практики, используя jQuery's ajax. В настоящее время у меня есть 3 кнопки, каждая из которых, при нажатии, показывает различное содержимое с помощью форм с использованием вызова ajax. Содержимое хранится в разных файлах. Допустим, вы вводите «AAA» в форме в содержании, показанном после нажатия первой кнопки. Затем вы нажимаете на вторую кнопку, которая заменит первый контент на новый второй. И вы вводите «BBB» в форме там. То, что я хочу достичь, когда вы это делаете, я не хочу, чтобы страница забывала, что вы набрали на первой странице (или до того, как вы изменили страницу с помощью вызова ajax), и в конце вы нажмете кнопку SUBMIT, который является общим для всех кнопок. Затем я хочу, чтобы веб-страница представляла как «AAA», так и «BBB» для большего количества вычислений.

Возможно ли это? Это похоже на сайт пиццы. Предположим, что на веб-сайте есть 2 вкладки, одна для опции теста для пиццы, а другая для опций пополнения. Также предположим, что отображение вкладок происходит с помощью ajax путем асинхронного отображения содержимого. Когда вы выбираете параметры на вкладке теста пиццы, и вы меняете вкладку, чтобы выбрать варианты опций. Затем вы, наконец, разместите заказ, который отражает выбор клиентов как для теста, так и для пополнения.

Как вы могли реализовать это? Любые советы будут очень признательны.
Нужна ли мне база данных с использованием SQL? Поскольку это простой веб-сайт практики, он не должен помнить параметры клиента после отправки формы, и они закрывают страницу.

Вот часть моего кода, так как я не могу написать их все. Я также опустил некоторые несущественные части.

PHP файл1:

<script> 
    $(document).ready(function(){ 
     $(".dough, .topping").click(function(){ 
      $.ajax({ 
       url: /*URL is either dough.php or topping.php*/ 
       success: function(data){ 
        $(".result").html(data); 
       }, 
       error: function(data){ 
        alert("error"); 
       } 
      }); 
     }); 
    }); 
</script> 
<button class="dough">Dough</button> 
<button class="topping">Toppings</button> 
<div class="result"></div> <!--Here I want to show the content with ajax--> 

PHP файл2 (= dough.php) и файл3 (= topping.php):/* Это форма, содержащий файлы, и оба имеют одинаковую структуру */

<form action="confirm.php" method="POST"> 
    <!--Pizza's dough and topping photos, price and name etc--> 
    <input type="text" name="******"> <!--This is the input form--> 
</form> 

В этом случае я чувствую, что у меня должна быть конечная кнопка «отправить» за пределами тега формы, потому что кнопка отправки является общей и должна оставаться внизу страницы в процессе отображения.

Answer 1

<form action="confirm.php" method="POST"> 
    <!--Pizza's dough and topping photos, price and name etc--> 
    <input type="text" class='myValue' name="******"> 
    <!-- this button is for saving the input entered above; for topping form give 'toppings' class--> 
    <input class='option-button pizza-dough' type='button' value='select'/> 
</form> 

Добавить обработчик событий для данной формы (ов)

$('.result').on('click','.pizza-dough,.toppings',function(e){ 
    //using on() because forms are dynamically added 
    var myValue = $(this).siblings('.myValue').val(); 
    if(this).hasClass('.pizza-dough') { 
     localStorage.setItem('pizza-dough', myValue);//store the value in localStorage 
    }else{ 
     localStorage.setItem('toppings', myValue);//store the value in localStorage 
    } 
}); 

Теперь предположим, что вы следующие общие кнопки отправки

<input type='button' value='submit' class='submit-values'/> 

Добавить обработчик события для кнопки, чтобы представить значения

$('.submit-values').click(function(e){ 
    var dataToSend = {'pizza-dough':localStorage.getItem('pizza-dough'),'topppings':localStorage.getItem('toppings')}; 
    $.ajax({ 
      url: /*submit url*/, 
      method: "POST", 
      data: dataToSend, 
      success: function(data){ 
       //handle success 
      }, 
      error: function(data){ 
       //handle error 
      } 
    }); 
}); 

Добавление валидации для значений localStorage остается для вас. Узнайте больше о localStorage и sessionStorage, чтобы выбрать наиболее подходящий вам вариант.