简体   繁体   中英

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

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}

Try Changing form method to POST instead of get

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

<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>

to

<input type="submit">

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM