How Do I Store The User Input From The HTML form element to Javascript Variables?-CodePudding

i cant seem to figure out why the input isnt storing in the variables. I've tried searching for a few days but found nothing so im asking here can somebody please help.

my code:

function openForm() {
  document.getElementById("myForm").style.display = "block";
  document.getElementById("profile").style.display = "none";
  document.getElementById("usernametxt").style.display = "none";
}

function closeForm() {
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;
  console.log(input);
  document.getElementById("myForm").style.display = "none";
  document.getElementById("Login").style.display = "none";
  document.getElementById("profile").style.display = "block";
  document.getElementById("usernametxt").style.display = "block";

  alert(username);
  alert(password);
}

<div>
  <button  onclick="openForm()" id="Login">Log In</button>

  <!-- The form -->
  <div  id="myForm">
    <form  onsubmit="return false;">
      <h1>Login</h1>

      <label for="username"><b>Username</b></label>
      <input type="text" placeholder="Enter Username" name="username" id="username" required>

      <label for="psw"><b>Password</b></label>
      <input type="password" placeholder="Enter Password" name="psw" id="password" required>

      <button type="submit" >Login</button>
      <button type="button"  onclick="closeForm()">Close</button>
    </form>
  </div>
</div>

CodePudding user response：

I hope this will help you:

<div>
  <button  onclick="openForm()" id="Login">
    Log In
  </button>

  <!-- The form -->
  <div  id="myForm">
    <form  onsubmit="return false;">
      <h1>Login</h1>

      <label for="username"><b>Username</b></label>
      <input
        type="text"
        placeholder="Enter Username"
        name="username"
        id="username"
        required
      />

      <label for="psw"><b>Password</b></label>
      <input
        type="password"
        placeholder="Enter Password"
        name="psw"
        id="password"
        required
      />

      <button type="submit" >Login</button>
      <button type="button"  onclick="closeForm()">
        Close
      </button>
    </form>
  </div>
</div>

js:

    function openForm() {
    document.getElementById("myForm").style.display = "block";
    document.getElementById("profile").style.display = "none";
    document.getElementById("usernametxt").style.display = "none";
  }
  
  function closeForm() {
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    document.getElementById("myForm").style.display = "none";
    document.getElementById("Login").style.display = "none";
    // document.getElementById("profile").style.display = "block";
    // document.getElementById("usernametxt").style.display = "block";
    alert(username);
    alert(password);
    console.log(username,password) // if you want to see store value in console
  }

CodePudding user response：

Your code is throwing an error before you come to the console.log line at

console.log(input);

Corrected method:

function closeForm() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// console.log(input); <= Remove this
document.getElementById("myForm").style.display = "none";
document.getElementById("Login").style.display = "none";
document.getElementById("profile").style.display = "block";
document.getElementById("usernametxt").style.display = "block";

alert(username);
alert(password);

}

CodePudding user response：

Couple of things, notice your username variable is defined inside that closeForm function. You might want to define username outside that particular function so that it is scoped to other functions as well.

.value works fine to capture the value of the input. To verify that, put a console.log(document.getElementById("username").value) as the first step in the closeForm function.