How can I pass parameter from 1 HTML page to another HTML page with AJAX?

Question

This is my first page.

<!DOCTYPE html>
<html>
<head>
    <title>Student List</title>
</head>
<body>
        <h1>Customer Form</h1>
        <form>
        <div>
            <label>Customer Name:</label>
            <input type="text" autofocus id="name">
        </div>
        <br>
        <div>
            <label>Address:</label>
            <input type="text" id="address">
        </div>
    <button  type="button" onclick="myFunction()">Submit</button>
        </form>
    
    <!-- JavaScript -->
    <script type="text/javascript" src="./javascript.js"></script>
</body>
</html>

This is my second page.

<!DOCTYPE html>
<html>
<head>
    <title>Student List</title>
</head>
<body>
        
    <p id="1"></p>
        
    <!-- JavaScript -->
</body>
</html>

MY JAVASCRIPT

function myFunction() {
    const xhttp = new XMLHttpRequest();
    xhttp.onload = function(){
        name = document.getElementById('name').value;
        address = document.getElementById('address').value;
        document.getElementById("1").innerHTML="<h1>alola="+name+"</h1>";
        document.getElementById("2").innerHTML=address;
    }
    xhttp.open("GET", name);
    xhttp.send();
}

I would like to display my name when typing my name from first page in the customer name label, and when i click submit. my second page display my name in the "id=1".

https://stackoverflow.com/questions/5448545/how-to-retrieve-get-parameters-from-javascript your open seems to be wrong, you should be passing url — Ammar Aslam, Nov 11 '21 at 06:58

score 0 · Answer 1 · answered Nov 11 '21 at 07:28

Ajax and ajax like techniques (fetch etc.) are usually used to either post data to a form or to get data from a url.

To send data from one HTML page to another you would need some kind of database and server side code to capture and store it and later retrive it.

If you just want inputed client side data to persist across pages then look at sessionStorage or localStorage, for example to keep the name we type until we exit the browser or clear session data:

First page:

<form>
        <div>
            <label>Customer Name:</label>
            <input type="text" autofocus id="name">
        </div>
        <br>
        <div>
            <label>Address:</label>
            <input type="text" id="address">
        </div>
    <button  type="button" onclick="">Submit</button>
        </form>
<script>
  const name=document.getElementById('name')
  name.addEventListener("keyup", (e) => {
      
  sessionStorage.setItem('uname', name.value);
});
</script>

Second page:

<body>
        
  <p id="usersName"></p>
  <script>
    let userNameElm = document.getElementById('usersName');
    userNameElm.innerText = sessionStorage.getItem('uname');
  </script>   
</body>

Just remember to be careful what you store, and that it's only stored on the frontend/client side.

I am just new to Javascript. Anyway, thank you – CallmeMinh Nov 11 '21 at 21:15 — CallmeMinh, Nov 11 '21 at 21:15

How can I pass parameter from 1 HTML page to another HTML page with AJAX?

1 Answers1