why can't I see the form results in html?-CodePudding

I am a beginner at html and I was trying to learn how forms in html works, but as shown in the below code I was not able to get the form results after clicking on submit button. Can you please tell me why its not working and how to fix it?

index.html

<!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>html/css</title>
</head>
<body>

   <form action="result.html" method="get">
    <label for="N">Name:</label>
       <input type="text" id="N" name="Name" required>
      <br>

       <label  for="P">Phone number:</label>

       <input type="number" id="P" name="phone_nos" required> 
       <br>

    <button>submit</button>
       <br>
   </form>
</body>
</html>

result.html

<!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>Document</title>
</head>
<body>
    <div id="results"></div>
   <a href="/">Go Back</a>
    <script>
        const resultsList = document.getElementById('results')
        new URLSearchParams(window.location.search).forEach(
(value,name)=>{ resultsList.append('${name} : ${value}')
        resultsList.append(document.createElement('br'))
        })
    </script>
</body>
</html>

This is what is displayed on the screen after clicking on submit button

${name} : ${value} ${name} : ${value}

CodePudding user response：

Try Changing form method to POST instead of get

--> <form action="result.html" method="post">

CodePudding user response：

<input> elements of type submit are rendered as buttons. When the click event occurs (typically because the user clicked the button), the user agent attempts to submit the form to the server.

Change

<button>submit</button>

<input type="submit">