添加电子邮件地址和密码输入到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

回答

相关问题