Getting blank Values using Javascript from Input Element

Question

So, I was working on a simple Form validation. But after entering the value when I try to get the value from the input element in the console using JavaScript, it is returning blank.

Where am I going wrong:

Here is the code:

var x = document.getElementById("fName").value;
var y = document.getElementById("lName").value;
var z = document.getElementById("emailId").value;

function myFunction() {
  document.getElementById("demo").innerHTML = x;
  console.log(x);
}

<h1 class="jumbotron">Simple Form Validation</h1>
<div class="container-fluid">
  <form>
    <label>First Name: <input type="text" value="" id="fName" placeholder="ex: Shubham"></label><br />
    <label>Second Name: <input id="lName" value="" type="text" placeholder="ex: Bhatt"></label><br />
    <label>Email Id: <input id="emailId" value="" type="alphanumeric" placeholder="ex: [email protected]"></label> <br />
    <input type="button" value="Submit" id="submitBtn" class="btn btn-primary" onclick="myFunction()">
    <p id="demo"></p>
  </form>
</div>

Your code gets the values of the fields once, when the page first loads. Move those first three lines of code inside the function. — Pointy
– Pointy, Commented Aug 26, 2017 at 13:45

kyun · Accepted Answer · 2017-08-26 13:47:38Z

    /*
    var x = document.getElementById("fName").value;
    var y = document.getElementById("lName").value;
    var z = document.getElementById("emailId").value;
    */
        function myFunction(){
            var x = document.getElementById("fName").value;
            var y = document.getElementById("lName").value;
            var z = document.getElementById("emailId").value;
            document.getElementById("demo").innerHTML = x;
            console.log(x);
        }

<h1 class="jumbotron">Simple Form Validation</h1>
<div class="container-fluid">
    <form>  
        <label>First Name: <input type="numeric" value="" id="fName" placeholder="ex: Shubham"></label><br />
        <label>Second Name: <input id="lName" value="" type="text" placeholder="ex: Bhatt"></label><br />
        <label>Email Id: <input id="emailId" value="" type="alphanumeric" placeholder="ex: [email protected]"></label> <br />
        <input type="button" value="Submit" id="submitBtn" class="btn btn-primary" onclick="myFunction()">
    <p id="demo"></p>
    </form>
</div>

Move variable

Global -> Local

Sohail · Accepted Answer · 2017-08-26 13:48:29Z

0

You are getting the values outside the function, in other words, you try to get the values of the input fields before you enter anything there. Try this instead of your javascript

<script>

        function myFunction(){
            var x = document.getElementById("fName").value;
            var y = document.getElementById("lName").value;
            var z = document.getElementById("emailId").value;
            document.getElementById("demo").innerHTML = x;
            console.log(x);
        }
</script>

answered Aug 26, 2017 at 13:48

Sohail

2,3329 gold badges37 silver badges66 bronze badges

Comments

Ashish sah · Accepted Answer · 2017-08-26 13:48:44Z

0

You are extracting the values when the documents get ready. But you have to get the value when users submit the form.So you need to get the values inside the function try using this:

    function myFunction(){
         var x = document.getElementById("fName").value;
       var y = document.getElementById("lName").value;
        var z = document.getElementById("emailId").value;
        document.getElementById("demo").innerHTML = x;
        console.log(x);
    }

answered Aug 26, 2017 at 13:48

Ashish sah

7539 silver badges17 bronze badges

Comments

lumio · Accepted Answer · 2017-08-26 13:50:11Z

You only querying your values once as you load the page. What you can do is to query the fields and value inside your function. Or better: only check the values in your function and leave the getElementById still outside, like this:

var x = document.getElementById("fName");
var y = document.getElementById("lName");
var z = document.getElementById("emailId");

function myFunction() {
  document.getElementById("demo").innerHTML = x.value;
  console.log(x.value);
}

<h1 class="jumbotron">Simple Form Validation</h1>
<div class="container-fluid">
  <form>
    <label>First Name: <input type="text" value="" id="fName" placeholder="ex: Shubham"></label><br />
    <label>Second Name: <input id="lName" value="" type="text" placeholder="ex: Bhatt"></label><br />
    <label>Email Id: <input id="emailId" value="" type="alphanumeric" placeholder="ex: [email protected]"></label> <br />
    <input type="button" value="Submit" id="submitBtn" class="btn btn-primary" onclick="myFunction()">
    <p id="demo"></p>
  </form>
</div>

Collectives™ on Stack Overflow

Getting blank Values using Javascript from Input Element

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related