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>

将输入数据存储在JS类中

1 个答案: