Getting blank Values using Javascript from Input Element - javascript

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: abc#gmail.com"></label> <br />
<input type="button" value="Submit" id="submitBtn" class="btn btn-primary" onclick="myFunction()">
<p id="demo"></p>
</form>
</div>

/*
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: abc#gmail.com"></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

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>

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);
}

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: abc#gmail.com"></label> <br />
<input type="button" value="Submit" id="submitBtn" class="btn btn-primary" onclick="myFunction()">
<p id="demo"></p>
</form>
</div>

Related

html form to javascript and back to html

Please let me know why this doesn't work and how I can achieve this as simple as possible. my professor wants the simplicity to reflect 15 minutes or work. I just don't grasp it though. Thanks in advance!
<script language="JavaScript">
var obj = {
name = "",
address = "",
ccNumber = "",
}
function printObj() {
document.getElementById("display").innerHTML = obj.name + " " + obj.address + " " + obj.ccNumber;
}
function storeInput(user_input1, user_input2, user_input3) {
name = document.getElementById("myObject").form.user_input1;
address = document.getElementById("myObject").form.user_input2;
ccNumber = document.getElementById("myObject").form.user_input3;
}
</script>
<form>
<label><b>Enter full name</b></label>
<input type="text" name="message" id="user_input1">
</form>
<form>
<label><b>Enter billing address</b></label>
<input type="text" name="message" id="user_input2">
</form>
<form>
<label><b>Enter CC number</b></label>
<input type="text" name="message" id="user_input3">
</form>
<input type="submit" onclick="obj.storeInput(user_input1, user_input2, user_input3);obj.showInput()"><br />
<p id='display'></p>
Ok! You need your storeInput() to reference the declared object. Currently with your code as it is storeInput() is an independent function but for you event handler (onclick) to work. You need to redefine the storeInput() as
obj.storeInput() = function(user_input1, user_input2, user_input3) {.....};
This will get the job done. It will not store the values, but will display them.
<!DOCTYPE html>
<html>
<body>
<form>
<label><b>Enter full name</b></label>
<input type="text" name="message" id="user_input1">
<label><b>Enter billing address</b></label>
<input type="text" name="message" id="user_input2">
<label><b>Enter CC number</b></label>
<input type="text" name="message" id="user_input3">
</form>
<input type="submit" onclick="aFunction();"><br />
<p id='display'></p>
<script>
function aFunction(){
var x = document.querySelector('#user_input1').value; // gets value of user_input1 field
var y = document.querySelector('#user_input2').value; // gets value of user_input2 field
var z = document.querySelector('#user_input3').value; // gets value of user_input3 field
document.querySelector('#display').innerHTML = x + ' ' + y + ' ' + z; // puts the values in <p> with id of 'display'
}
</script>
</body>
</html>
Hope this helps you understand.

Superscript Calculation Javascript Variables

I'm exercising in calculations with variables using javascript and i can't figure out how to use superscripts in variables. With some help Javascript calculations holding variables i learned how to do calculations in general but my new question is how to use superscripts?
<form name="Calcultor" Method="Get" id='form1'>First Number:
<input type="text" name="first" size="35" id="first">+ Second Number:
<input type="text" name="second" size="35" id="second">
<br>Answer:
<input type="text" name="ans" size="35" id="ans" />
<input type="text" name="ans2" size="35" id="ans2" />
<button type="button" onclick="Calculate();">Calculate</button>
</form>
<script>
function Calculate() {
var first = document.getElementById('first').value;
var second = document.getElementById('second').value;
var ans = document.getElementById('ans').value;
var ans2 = document.getElementById('ans2').value;
document.getElementById('ans').value = parseInt(first) + parseInt(second);
document.getElementById('ans2').value = 1.112 - 0.00043499 * parseInt(document.getElementById('ans').value)/*insert ans into a parenthensis*/ + 0.00000055 * parseInt(document.getElementById('ans').value)/*insert ans into a parenthensis and ^2 outside the parenthesis*/ - 0.00028826;
}
</script>
Thanks in advance
There is a function in javascript Math.pow();
Math.pow(2,4) gives you 2^4 = 16.
Math.pow(2,4);
>16
Math.pow(2,4.1);
>17.148375400580687
<form name="Calcultor" Method="Get" id='form1'>First Number:
<input type="text" name="first" size="35" id="first">+ Second Number:
<input type="text" name="second" size="35" id="second">
<br>Answer:
<input type="text" name="ans" size="35" id="ans" />
<input type="text" name="ans2" size="35" id="ans2" />
<button type="button" onclick="Calculate();">Calculate</button>
</form>
<script>
function Calculate() {
var first = document.getElementById('first').value;
var second = document.getElementById('second').value;
var ans = document.getElementById('ans').value;
var ans2 = document.getElementById('ans2').value;
document.getElementById('ans').value = parseInt(first) + parseInt(second);
document.getElementById('ans2').value = 1.112 - 0.00043499 * parseInt(document.getElementById('ans').value) + 0.00000055 * Math.pow(parseInt(document.getElementById('ans').value), 2) - 0.00028826;
}
</script>
Updated Snippet according to answers works now!

Uncaught Range Error Maximum call stack exceeded whilst trying to make variable from form input JS

As the title would suggest I keep getting that error when trying to test out a basic script which would "read" form inputs and make them variables to use later on.
HTML:
<script type="text/javascript" language="javascript"
src="./js/lisearch.js"></script>
<form name="search" action="" method="post">
<h2>Include:</h2>
<div id="formtitle" class="formdiv">
<p> Current Job Title:</p><input id="jtitle" type="text" name="jobtitle" placeholder="Demand planner, Supply planner">
</div>
<div id="formcompany" class="formdiv">
<p> Current Company:</p><input id="cmpy" type="text" name="company" placeholder="GSK OR Danone">
</div>
<div id="formkeywords" class="formdiv">
<p> Keywords:</p><input id="kwrd" type="text" name="keywords" placeholder="(SAP OR JDE) AND FMCG">
</div>
<div id="formfirst" class="formdiv">
<p> First Name:</p><input id="fname" type="text" name="first">
</div>
<div id="formlast" class="formdiv">
<p> Last Name:</p><input id="lname" type="text" name="last">
</div>
<hr>
<h2> Exclude:</h2>
<div id="formnottitle" class="formdiv">
<p> Current Job Title:</p><input id="njtitle" type="text" name="notjobtitle" placeholder="Manager OR Consultant">
</div>
<div id="formnotcompany" class="formdiv">
<p> Current Company:</p><input id="ncmpy" type="text" name="notcompany" placeholder="Coke OR Pepsi">
</div>
<div id="formnotkeywords" class="formdiv">
<p> Keywords:</p><input id="nkwrd" type="text" name="notkeywords" placeholder="Recruiter OR Recruitment">
</div>
<div id="submit" class="formdiv">
<input type="button" value="Create Search" onclick="onclick()">
</div>
<div id="output" class="formdiv">
<input type="text" name="output">
</div>
</form>
JS:
var company;
var jobtitle;
var keywords;
var fname;
var lname;
var notcompany;
var notjobtitle;
var notkeywords;
function onclick() {
company = document.getElementById('cmpy').value;
jobtitle = document.getElementById('jtitle').value;
keywords = document.getElementById('kwrd').value;
fname = document.getElementById('fname').value;
lname = document.getElementById('lname').value;
notcompany = document.getElementById('ncmpy').value;
notjobtitle = document.getElementById('njtitle').value;
notkeywords = document.getElementById('nkwrd').value;
test();
}
function test() {
alert(company + jobtitle + keywords + fname + lname + notcompany + notjobtitle + notkeywords);
}
As you can probably tell I am really new to all this but can't seem to figure this out, any help appreciated.
Thanks,
This kind of message you get when doing recursive calls and get stuck somewhere in a cycle. in your case rename onclick() function to something else, that's it!
Here I made a plunker
function toto() {
company = document.getElementById('cmpy').value;
jobtitle = document.getElementById('jtitle').value;
keywords = document.getElementById('kwrd').value;
fname = document.getElementById('fname').value;
lname = document.getElementById('lname').value;
notcompany = document.getElementById('ncmpy').value;
notjobtitle = document.getElementById('njtitle').value;
notkeywords = document.getElementById('nkwrd').value;
test();
}
function test() {
alert(company + jobtitle + keywords + fname + lname + notcompany + notjobtitle + notkeywords);
}
and
<input type="button" value="Create Search" onclick="toto()">
put function test at the top of your js code so that onclick() knows what it is when the event handler is assigned.
Edit: Additional feedback:
The test function isn't even needed. Just insert the alert code into the onclick function.
edit: Moving the script tags shouldn't actually have any effect. I am not sure what is going wrong here.
Edit:solved it
<form name="search" action="" method="post">
<h2>Include:</h2>
<div id="formtitle" class="formdiv">
<p> Current Job Title:</p><input id="jtitle" type="text" name="jobtitle" placeholder="Demand planner, Supply planner">
</div>
<div id="formcompany" class="formdiv">
<p> Current Company:</p><input id="cmpy" type="text" name="company" placeholder="GSK OR Danone">
</div>
<div id="formkeywords" class="formdiv">
<p> Keywords:</p><input id="kwrd" type="text" name="keywords" placeholder="(SAP OR JDE) AND FMCG">
</div>
<div id="formfirst" class="formdiv">
<p> First Name:</p><input id="fname" type="text" name="first">
</div>
<div id="formlast" class="formdiv">
<p> Last Name:</p><input id="lname" type="text" name="last">
</div>
<hr>
<h2> Exclude:</h2>
<div id="formnottitle" class="formdiv">
<p> Current Job Title:</p><input id="njtitle" type="text" name="notjobtitle" placeholder="Manager OR Consultant">
</div>
<div id="formnotcompany" class="formdiv">
<p> Current Company:</p><input id="ncmpy" type="text" name="notcompany" placeholder="Coke OR Pepsi">
</div>
<div id="formnotkeywords" class="formdiv">
<p> Keywords:</p><input id="nkwrd" type="text" name="notkeywords" placeholder="Recruiter OR Recruitment">
</div>
<div id="submit" class="formdiv">
<input type="button" id="onclick" value="Create Search"/>
</div>
<div id="output" class="formdiv">
<input type="text" name="output"/>
</div>
</form>
<script type="text/javascript">
var company;
var jobtitle;
var keywords;
var fname;
var lname;
var notcompany;
var notjobtitle;
var notkeywords;
document.getElementById("onclick").onclick=function() {
company = document.getElementById('cmpy').value;
jobtitle = document.getElementById('jtitle').value;
keywords = document.getElementById('kwrd').value;
fname = document.getElementById('fname').value;
lname = document.getElementById('lname').value;
notcompany = document.getElementById('ncmpy').value;
notjobtitle = document.getElementById('njtitle').value;
notkeywords = document.getElementById('nkwrd').value;
alert(company + jobtitle + keywords + fname + lname + notcompany + notjobtitle + notkeywords);
}
</script>

Submit form not connected to multiple fields

I have a form on a webpage that I want a user to be able to fill out, hit submit, and it displays something like "User: [name] has a [event] event at [location] with details [description]" in a comment section below. So multiple entries will just load under each other. Right now when I hit submit, it will only submit the description text and nothing else. My function getInfo() should be displaying multiple values but is not. How can I remedy this. Full code linked below
https://github.com/tayrembos/Nav/blob/master/back.html
<script type="text/javascript">
function getInfo() {
text = name.value;
text = words.value;
document.getElementById("para").innerHTML += '<p>'+ text
document.getElementById("words").value = "Enter comment"
document.getElementById('name').value = "Enter name"
}
</script>
<form method="POST" name='myform'>
<p>Enter your name:
<textarea id='name' rows="1" cols="20">Enter name</textarea>
<textarea id='name' rows="1" cols="20">Enter name</textarea>
<textarea id='words' rows="10" cols="20">Enter comment</textarea>
<input type="button" onclick="getInfo()" value="Submit!" /> <br>
<p id="para"></p>
i use append from jquery(vote if it really solves your problem).
function myFunction() {
var x = document.getElementById("product");
var txt = "";
var all = {};
var i;
for (i = 0; i<x.length-1; i++) {
//txt = txt + x.elements[i].value + "<br>";
all[x.elements[i].name]= x.elements[i].value;
}
$("p").append(JSON.stringify(all, null, 2));
//var myObj = { "name":"John", "age":31, "city":"New York" };
//document.getElementById("demothree").innerHTML = myObj;
//var myJSON = JSON.stringify(all);
//window.location = "server.php?x=" + myJSON;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<form id="product">
Expire: <input type="text" name="pexpire" value="3:45"><br>
Old Price: <input type="text" name="poldprice" value="30"><br>
Price: <input type="text" name="pprice" value="28"><br>
Category: <input type="text" name="pcategory" value="Ενδύματα"><br>
Variaty: <input type="text" name="pvariaty" value="Τζιν"><br>
City: <input type="text" name="pcity" value="Δράμα"><br>
Store: <input type="text" name="pstore" value="Groove"><br>
Picture: <input type="text" name="ppicture" value="aaa"><br>
</form>
<button onclick="myFunction()">Submit</button>
<p id="list"></p>

Display two input values with '&' in-between them in another input box in onkeyup

I have three input box.If I type 'a' in first and 'b' in second,i should get 'a&b' in third input box. Help!!
HTML:
<input type="text" id="fname" onkeyup="myFunction()">
<input type="text" id="lname" onkeyup="myFunction()">
<input type="text" id="gname" >
SCRIPT:
<script>
function myFunction() {
var v = document.getElementById("fname").value;
var c = document.getElementById("lname").value;
document.getElementById("gname").innerHTML = v.'&'.c;
}
</script>
Update: Also suggest me, I have to display only var v or r.But mine doesn't works.Please help
HTML:
<input type="text" id="fname" onkeyup="myFunction()">
<input type="text" id="rname" onkeyup="myFunction()">
<input type="text" id="lname" onkeyup="myFunction()">
<input type="text" id="gname" >
SCRIPT:
<script>
function myFunction() {
var v = document.getElementById("fname").value;
var r = document.getElementById("rname").value;
var c = document.getElementById("lname").value;
document.getElementById("gname").innerHTML = (v||r)+'&'+c;
}
</script>
Concatenation in Javascript is done using the + operator.
See this documentation from MDN and search for concatenation.
Replace
document.getElementById("gname").innerHTML = v.'&'.c;
with
document.getElementById("gname").innerHTML = v+'&'+c;
Also, use .value to set value of textbox instead of .innerHTML.
EDIT: Code updated with logical or operator as requested by OP.
Working Code Snippet:
function myFunction() {
var v = parseInt(document.getElementById("fname").value);
var c = parseInt(document.getElementById("lname").value);
document.getElementById("gname").value = v||c;
}
<input type="text" id="fname" onkeyup="myFunction()">
<input type="text" id="lname" onkeyup="myFunction()">
<input type="text" id="gname" >
Enter value<input type="text" id="textbox1" onkeyup="document.getElementById('textbox2').value = this.value" />
<input type="text" id="textbox2" />

Categories

Resources