Question 189038 in Html Question posted in
Some basic documentation can be found here.

Html – How to print login and signup details in a site using Admin button

I created a login form using html and css, i had created a Admin button when i click on the admin button it needs to print the logged in and signup persons details in a table format.

Iam learning java script, html and css. So i created a simple login form and then i created a admin buton.I decided to give a functionality to admin buton.

  1. When i logged in or signup i need to store that data
    2)I need to print the stored data when i clicked on admin button in tabular format.
Tags:

2

Answers


  1. 0

    I’ll preface this by saying this won’t be the cleanest solution, but hopefully the easiest to understand as a beginner.

    For the first part of the problem, create a handler function for the signup button on the form which extracts the data from the form fields, creates an object from this data and adds it to an array of users.

    For the admin functionality, add an empty table element to your HTML. Then create another handler, for the admin button, which iterates the array of users and creates, as a child of the table element you created, a table row for each of the user objects in the array.

    If you have any trouble figuring these out post a code sample and I’ll give you some further pointers 🙂

    Login or Signup to reply.
  2. 0

    Here’s an example using an array to store the data:

    <script>
  var users = []; // Array to store user details

  function storeUserDetails(username, password) {
    var user = {
      username: username,
      password: password
    };
    users.push(user);
  }

  function loginUser() {
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    storeUserDetails(username, password);
  }
</script>

    Display Stored Data
    Create a table in HTML where you can display the stored user details.

    <table id="userTable" style="display: none;">
  <thead>
    <tr>
      <th>Username</th>
      <th>Password</th>
    </tr>
  </thead>
  <tbody id="userTableBody">
    <!-- User details will be added dynamically here -->
  </tbody>
</table>

    Show data

    <script>
  function showUserDetails() {
    var table = document.getElementById("userTable");
    var tableBody = document.getElementById("userTableBody");

    // Clear table body
    tableBody.innerHTML = "";

    // Populate table with user details
    for (var i = 0; i < users.length; i++) {
      var user = users[i];
      var row = tableBody.insertRow();
      var usernameCell = row.insertCell();
      var passwordCell = row.insertCell();

      usernameCell.innerHTML = user.username;
      passwordCell.innerHTML = user.password;
    }

    // Show the table
    table.style.display = "table";
  }
</script>

    Trigger the Functions

    <form onsubmit="loginUser()">
  <!-- Login form fields -->
  <input type="text" id="username" placeholder="Username">
  <input type="password" id="password" placeholder="Password">
  <button type="submit">Login</button>
</form>

<button onclick="showUserDetails()">Admin</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search