Хранение входных данных в классе JS

Question

Мой маленький проект для пользователя, чтобы заполнить 2 формы.Когда вы отправите первый, появится второй.Когда вы отправляете вторую форму, она перенаправляет вас на другую страницу, где будут отображаться все данные.Мне удалось получить данные из второй формы с использованием PHP, но мне сказали, что мне нужно сохранить входные данные в классе JS и затем отобразить его ...

Форма 1:

<fieldset>
     <legend>Sign-up Form</legend>
     <p>
         <label for="firstname">First name</label>
         <input id="firstname" name="firstname" type="text">
     </p>
     <p>
         <label for="lastname">Last name</label>
         <input id="lastname" name="lastname" type="text">
     </p>
     <p>
        <label for="email">Email</label>
         <input id="email" name="email" type="email">
     </p>
     <p>
         <label for="confirm_email">Confirm Email</label>
         <input id="confirm_email" name="confirm_email" type="email">
     </p>
     <p>
         <label for="agree">Please agree to our policy</label>
         <input id="checkbox" class="checkbox" name="agree" type="checkbox">
     </p>
 </fieldset>

Это мой код для отображения / скрытия форм:

  $( "#signupForm" ).submit(function( event ) {
     $( "#signupForm2" ).show( "slow" );


     $( "#signupForm" ).hide( "fast" );
     event.preventDefault();
 });

И все, что я придумал с классами JS, это:

 class store_data{
        constructor(){
            this.firstname = ['firstname'];
            this.lastname = ['lastname']
        }
 }

Спасибо за любую помощь.

Answer 1

$( "#signupForm" ).submit(function( event ) {
      event.preventDefault();
      $( "#signupForm2" ).show( "slow" );
     $( "#signupForm" ).hide( "fast" );
     const firstname = $("#firstname").val();
     const lastname = $("#lastname").val();

     const person = new Person(firstname, lastname)
     person.greet()
    
 });
 
 class Person {
 
        constructor(firstname, lastname){
            this.firstname = firstname;
            this.lastname = lastname
        }
        
        greet() {
        console.log(`He, I'm ${this.firstname} ${this.lastname}`)
        }
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="signupForm">
<fieldset>
     <legend>Sign-up Form</legend>
     <p>
         <label for="firstname">First name</label>
         <input id="firstname" name="firstname" type="text">
     </p>
     <p>
         <label for="lastname">Last name</label>
         <input id="lastname" name="lastname" type="text">
     </p>
     <p>
        <label for="email">Email</label>
         <input id="email" name="email" type="email">
     </p>
     <p>
         <label for="confirm_email">Confirm Email</label>
         <input id="confirm_email" name="confirm_email" type="email">
     </p>
     <p>
         <label for="agree">Please agree to our policy</label>
         <input id="checkbox" class="checkbox" name="agree" type="checkbox">
     </p>
     <button type="submit">submit</button>
 </fieldset>
 </form>