Browser won't show my input value in address bar, and won't log values in console-CodePudding

Basically when I type simple form like this

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="loginContainer">
      <form>
        <div>
          <label for="name">Name:</label>
          <input id="name" type="text" />
        </div>

        <div>
          <label for="password">Password:</label>
          <input id="password" type="password" />
        </div>

        <input type="submit" value="Login" />
      </form>
    </div>

    <script>
      let nameVal = document.getElementById("name").value;
      let passwordVal = document.getElementById("password").value;

      console.log(nameVal);
      console.log(passwordVal);
    </script>
  </body>
</html>

My browser just shows in the address bar file:///C:/Users/User1/Desktop/index.html?, and also it won't log my name and password in console, it just looks like the page refreshes when I click the submit buttton and that's it, I remember before when I did stuff with forms, it would usually write in the address bar something like "...index.html?name=somerandomdata", did I write the form right? It seems like it doesn't process input values at all..I'm confused

I tried on firefox this same code, same result

CodePudding user response：

The reason your form data is not shown in the URL (and therefore not submitted with the request) is because your inputs lack name properties. The id is the unique identifier for the field in the HTML (for referencing from JS or with a <label> element), not for naming form data, that's what the name property is for.

You can fix this by including a name for each input, like so:

<input id="name" name="name" type="text" />
<input id="password" name="password" type="password" />

As for the logging, that's because the code in the <script> tag runs when the page loads and at that point neither input has a value. I'm not sure when you want to log the values (that might have just been for debugging), but you might consider wrapping the JS code you have in an event listener on change of either input.

For example, the following code will print the field name and value when the value in the input changes (runs after you make a change then blur the input):

document.getElementById("name").addEventListener("change", (event) => {
    console.log(event.target.name, event.target.value);
});