-1

So, I have this code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enter Details</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <form>
        <label>Student's Name</label>
        <input type="text" placeholder="Enter student's name">
        <br><br>
        <label>Roll No.</label>
        <input type="text" placeholder="Enter student's Roll No.">
        <br><br>
        <label>Class</label>
        <input type="text" placeholder="Enter student's class">
        <br><br>
        <label>Enter marks for English</label>
        <input type="text" placeholder="Marks for English goes here...">
        <br><br>
        <label>Enter marks for Maths</label>
        <input type="text" placeholder="Marks for Maths goes here...">
        <br><br>
        <label>Enter marks for Science</label>
        <input type="text" placeholder="Marks for Science goes here...">
        <br><br>
        <button>Get your marksheet</button>
    </form>
</body>
</html>

Let's say I have given all the inputs a class or id to identify them. I make another html file and make a table and I want the table's value to be the same as one of the inputs. So, technically speaking, how can I use one HTML file's classes and ids in another HTML file?

a random noob
  • 23
  • 1
  • 10
  • Do you want to use a variable you specified in one file and used it in another file? I got confused with your example and your question. – PrynsTag Jul 16 '22 at 16:05
  • No, I want to use one HTML file's classes and ids in another HTML file. – a random noob Jul 16 '22 at 16:13
  • If you want to pass data from one html page to another, you can try to use JavaScript and cookies – ytung-dev Jul 16 '22 at 16:20
  • If passing data/value to one html file from another is what you want then [this stackoverflow question](https://stackoverflow.com/questions/46393137/how-to-call-one-file-input-id-into-another-file-using-javascript) does want you want. – PrynsTag Jul 16 '22 at 16:23
  • Do I have to use that javascript function for every single id or class?! – a random noob Jul 16 '22 at 16:26
  • No, in that function, you just have to get all of your id/data and turn it to a js object and store it in a local storage. In your other html file get that object and use it the way you want iy. – PrynsTag Jul 16 '22 at 16:30
  • @PrynsTag Can you explain and pack all of it as an answer? I shall accept it if it works. – a random noob Jul 16 '22 at 17:07

1 Answers1

0

Basically you want to get all the input values when the user submitted the form and pack it to a JS Object and put it in the localStorage. In the other.html file, retrieve the JS Object and use it the way you want it.

my_html.html

<!DOCTYPE html>
<html>

<head>
  <title>index</title>
  <script>
    let form = document.getElementById("form");
    form.addEventListener("submit", function(e) {
      e.preventDefault();
      let studentName = document.getElementById('student-name').value;
      let studentId = document.getElementById('student-id').value;
      let studentObj = {
        "name": studentName,
        "id": studentId
      }
      localStorage.setItem("studentObj", JSON.stringify(studentObj));
    });
  </script>
</head>

<body>
  <form id="form">
    <label>Student's Name</label>
    <input id="student-name" type="text" placeholder="Enter student's name">
    <br><br>
    <label>Student's ID#</label>
    <input id="student-name" type="text" placeholder="Enter student's I.D. No.">
    <button type="submit">Submit</button>
  </form>
</body>

</html>

other.html

<!DOCTYPE html>
<html>

<head>
  <title>other page</title>
  <script>
    let studentObj = JSON.parse(localStorage.getItem("studentObj"));
    console.log(`Name: ${studentObj.name} at ${document.title}`);
  </script>
</head>

<body>
  <h1>otherPage.html</h1>
</body>

</html>
PrynsTag
  • 191
  • 1
  • 10