-2

You need to show the user's name in the heading. The heading should say Hello, (user) when the user enters their name into the text box which is a simple form input and presses the button.

To display the user's name, you'll need to read the user's name from the query string. You need to read the query string when the page is loaded, not when the button is pressed.

I need to implement this using javascript and query string but I haven't got a clue how.

<form>         
   <input type="text" name="user_name" placeholder="Enter your name!" />         
   <button type="submit">Apply!</button>       
</form>
Michael M.
  • 10,486
  • 9
  • 18
  • 34
cyrus
  • 1
  • 1
  • Please read the [Open letter to students with homework problems](https://softwareengineering.meta.stackexchange.com/questions/6166/open-letter-to-students-with-homework-problems) and [How do I ask and answer homework questions?](https://meta.stackoverflow.com/q/334822). Just copy/pasting your assignments will not win you any friends. – Quentin Nov 11 '22 at 09:36

2 Answers2

0
  <input type="text" placeholder="Enter name." id="txtname">  
  <button onclick="Submit()">Apply!</button>

After clicking on apply button displayUser.html page will open containing

<script>
    function Submit() {
      let name = document.getElementById("txtname").value;
      window.location.href = "displayUser.html?user=" + name;
    }
  </script>

displayUser.html

<html>
<head>
  <title>About</title>
<script>
  function sayHellow() {
    //to read query string
    let params = new URLSearchParams(window.location.search);
    let values = [];
    for (const value of params.values()) {
      //putting values in array
      values.push(value);
    }
    console.log(values);
    document.write("<h2>Hellow! "+values[0]+"</h2>")
  }
</script>
</head>
<body onload="sayHellow()">

</body>
</html>
Vivekanand Vishvkarma
  • 57
  • 4
-1

firstpage.html

<input type="text" id="titletxt">  
  <button onclick="Submit()">Submit</button>
  
  <script>
    function Submit() {
      let name = document.getElementById("txtname").value;
      window.location.href = "secondpage.html?" + name;
    }
  </script>

secondpage.html

<html>
<head>
  <title>Test</title>
<script>
  function loadTitle() {

    let queryString = window.location.search.split('?')[1];
    
    document.write("<h2>Hello "+queryString+"</h2>")
    document.title = "hello "+queryString;
  }
</script>
</head>
<body onload="loadTitle()">

</body>
</html>
Dipendrasinh Vaghela
  • 62
  • 5