添加電子郵件地址和密碼輸入到jQuery的一個const/JS

-1

所以下面的代碼允許我補充一個電子郵件地址和密碼時，我打提交張貼在盒子裏。這是偉大的，但我想它也把它添加到所謂的「用戶」，所以我每次添加一個用戶名和密碼的對象。它創建了一個新的用途（例如，用戶1，用戶2），並在其inputes的電子郵件和密碼，每個用戶。添加電子郵件地址和密碼輸入到jQuery的一個const/JS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
    <head> 
 

 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
     <style> 
 

 
      #userinfo { 
 
       width: 500px; 
 
       height: 500px; 
 
       border: 1px solid black; 
 
       color: black; 
 
      } 
 

 
     </style> 
 

 
    </head> 
 

 
    <body> 
 

 
     <form> 
 

 
     <input id="userEmail" type="email" placeholder="Email"> 
 

 
     <input id="userPassword" type="password" placeholder="Password"> 
 

 
     <button id="sub-btn" name="submit" class="btnAction">Add User</button> 
 

 
     </form> 
 

 

 
     <div id="userinfo"> 
 

 
      <p></p> 
 

 
     </div> 
 

 
       <script type="text/javascript"> 
 

 
        $('#sub-btn').click(function() { 
 
        const email = $('#userEmail').val(); 
 
        const password = $('#userPassword').val(); 
 
        const account = { 
 
         user1: [ 
 
         email: '', 
 
         password: '', 
 
         ] 
 
        }; 
 

 
        console.log(account); 
 
        event.preventDefault(); 
 
        
 
         if (email && password) { 
 
         // account.users.email.add(email); I know this isnt right but im guessing this is where the right code should go 
 
         $('#userinfo').html(email); 
 
         console.log(account); 
 
         } 
 

 
        }) 
 
       </script> 
 
    </body> 
 
</html>

來源

2017-09-14 Salvador Cervantes

歡迎堆棧溢出。你已經嘗試過這麼做了嗎？請回顧[預計需要多少研究工作？]（https://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users）。堆棧溢出不是一種編碼服務。預計您會在發佈之前研究您的問題，並嘗試親自編寫代碼***。如果你遇到* specific *，請回來幷包含[Minimal，Complete和Verifiable示例]（https://stackoverflow.com/help/mcve）以及你試用的內容摘要 – FluffyKitten

你可以.push()您創建account反對你users陣列：

var users = []; // Empty array 
 

 
$('#sub-btn').click(function(event) { 
 

 
    event.preventDefault(); 
 

 
    const email = $.trim($('#userEmail').val()); 
 
    const password = $.trim($('#userPassword').val()); 
 
    
 
    // Prevent empty 
 
    if (!email && !password) return alert("Enter Email and Password"); 
 
    
 
    // create account 
 
    var account = { 
 
     email: email, 
 
     password: password, 
 
    }; 
 
    
 
    // Push account to users 
 
    users.push(account) 
 

 
    // Test 
 
    console.clear(); 
 
    console.log("account: %o is added to users: %o", account, users); 
 

 
    // Insert into table 
 
    $('#userinfo').prepend("<tr><td>"+ email +"</td><td>"+ password +"</td></tr>"); 
 

 
    // Clear old values 
 
    $("#userEmail, #userPassword").val(""); 
 

 
});

#userinfo td{ 
 
    border: 1px solid black; 
 
}

<form> 
 
    <input id="userEmail" type="email" placeholder="Email"> 
 
    <input id="userPassword" type="password" placeholder="Password"> 
 
    <button id="sub-btn" name="submit" class="btnAction">Add User</button> 
 
</form> 
 
<table id="userinfo"></table> 
 

 
<script src="//code.jquery.com/jquery-3.1.0.js"></script>

所以呀，不要使用user1，user2等物體內（像你一樣） - 陣列是完美的用例。

來源

2017-09-14 19:02:52

這實際上非常有效。從未見過.trim被使用後，查找它...它的驚人！謝謝。 –

我會改變你的JSON的結構，像下面。

var data = { 
     users: [ 
      { email: '[email protected]', password: 'abc' }, 
      { email: '[email protected]', password: '123' } 
     ] 
    };

然後，你可以推動數據到數組，如下所示。

data.users.push({ email: '[email protected]', password: 'def'});

來源

2017-09-14 19:03:48 taylorsabell

添加電子郵件地址和密碼輸入到jQuery的一個const/JS

回答

相關問題