CODEWITHSUNDEEP
javascripthtmlformsgetelementbyid
Sirswagger21
Sirswagger21

Reputation: 289

Value of form input is blank in JavaScript

When I try to retrieve text that was entered in a form, the result is blank.

document.getElementById("pass").addEventListener("keydown", function() {
  document.getElementById("pass").style.backgroundColor = "#DFFEFE";
});
document.getElementById("pinCode").addEventListener("keydown", function() {
  document.getElementById("pinCode").style.backgroundColor = "#DFFEFE";
});
var pass = document.getElementById("pass").value;
var pinCode = document.getElementById("pinCode").value;

function createCookie() {
  window.alert(pass);
}
<div id="validation">
  <form id="validationForm">
    <fieldset>
      <label for="pass">Password:</label><br />
      <input type="text" id="pass" name="pass" /><br />
      <label for="pinCode">4-digit PIN:</label><br />
      <input type="text" id="pinCode" name="pinCode" /><br />
      <input type="submit" value="Log In" onclick="createCookie()" />
      <p id="rightorwrong"></p>
    </fieldset>
  </form>
</div>
<script type="text/javascript" src="password.js"></script>

When the user enters data in the form and presses submit, the function createCookie() is called. I know this works because if I put in window.alert("test"); in the function, it works. Therefore the problem is in the pass.

I tried removing the value from var pass = document.getElementById("pass").value;, but that didn't work either.

For clarification, this is what shows up when I press submit on the form:enter image description here

I'm stumped, because this is also relatively simple code. (I am on Chrome 84.)

TIA

Upvotes: 1

Views: 983

Answers (4)

Ajeet Eppakayala
Ajeet Eppakayala

Reputation: 1415

Put your variable inside the function. As initially when page loads, their values will be null and you are not reassigning values to them.

So, either change their values on keydown or set their values on click.

function createCookie() {
  var pass = document.getElementById("pass").value;
  var pinCode = document.getElementById("pinCode").value;
  window.alert(pass);
}

Check the snippet.

document.getElementById("pass").addEventListener("keydown", function() {
  document.getElementById("pass").style.backgroundColor = "#DFFEFE";
});
document.getElementById("pinCode").addEventListener("keydown", function() {
  document.getElementById("pinCode").style.backgroundColor = "#DFFEFE";
});

function createCookie() {
  var pass = document.getElementById("pass").value;
  var pinCode = document.getElementById("pinCode").value;
  window.alert(pass);
}
<div id="validation">
  <form id="validationForm">
    <fieldset>
      <label for="pass">Password:</label><br />
      <input type="text" id="pass" name="pass" /><br />
      <label for="pinCode">4-digit PIN:</label><br />
      <input type="text" id="pinCode" name="pinCode" /><br />
      <input type="submit" value="Log In" onclick="createCookie()" />
      <p id="rightorwrong"></p>
    </fieldset>
  </form>
</div>
<script type="text/javascript" src="password.js"></script>

Upvotes: 0

Al Mahdi
Al Mahdi

Reputation: 810

the javascript code should be like this

document.getElementById("pass").addEventListener("keydown", function () {
    document.getElementById("pass").style.backgroundColor = "#DFFEFE";

});
document.getElementById("pinCode").addEventListener("keydown", function () {
    document.getElementById("pinCode").style.backgroundColor = "#DFFEFE";
});


function createCookie() {
    var pass = document.getElementById("pass").value;
    var pinCode = document.getElementById("pinCode").value;
    alert(pass)
}

Upvotes: 0

crgavrila
crgavrila

Reputation: 3

You should get value when you submit, not when js file is loaded. Also you could listen with onchange function

var pass;
function createCookie() {
  pass = document.getElementById("pass").value;
  window.alert(pass); 
}

Upvotes: 0

Simone Rossaini
Simone Rossaini

Reputation: 8162

You must use value inside the function like that:

document.getElementById("pass").addEventListener("keydown", function() {
    document.getElementById("pass").style.backgroundColor = "#DFFEFE";
});
document.getElementById("pinCode").addEventListener("keydown", function() {
    document.getElementById("pinCode").style.backgroundColor = "#DFFEFE";
});


function createCookie() {
   var pass = document.getElementById("pass").value;
   var pinCode = document.getElementById("pinCode").value;
    window.alert(pass); 
      window.alert(pinCode); 
}
<div id = "validation">
    <form id = "validationForm">
        <fieldset>
            <label for = "pass">Password:</label><br  />
            <input type = "text" id = "pass" name = "pass"  /><br  />
            <label for = "pinCode">4-digit PIN:</label><br  />
            <input type = "text" id = "pinCode" name = "pinCode"  /><br  />
            <input type = "submit" value="Log In" onclick = "createCookie()"  />
            <p id = "rightorwrong"></p>
        </fieldset>
    </form>
</div>
<script type = "text/javascript" src = "password.js"></script>

Upvotes: 1

Related Questions