I'm trying to submit two parameters to be used in a javascript function. The code is as follows:
<!DOCTYPE html>
<html>
<head>
<script src="proj4js/lib/proj4js/lib/proj4js-compressed.js"></script>
</head>
<body>
<script>
function func1 (x,y){
var z=x+y
alert(z)
}
</script>
<form >
first input:<br>
<input type="text" y="Y" value=85>
<br>
second input:<br>
<input type="text" x="X" value=15>
<br><br>
<input type="submit" value="Submit">
</form>
<button type="button" onclick="func1(x,y)">Try it</button>
The error I get is Uncaught ReferenceError: x is not defined How should I define x and y as an input to be put in js function?
https://jsfiddle.net/hmfcLsf2/1/
<body>
<script>
function func1 (x,y){
var z=parseInt(x)+parseInt(y)
alert(z)
}
</script>
<form >
first input:<br>
<input id="y_field" type="text" y="Y" value=85>
<br>
second input:<br>
<input id="x_field" type="text" x="X" value=15>
<br><br>
</form>
<button type="button" onclick="func1(document.getElementById('x_field').value,document.getElementBy Id('y_field').value)">Try it</button>
Use getElementById. See the jsfiddle above.
In the scope the button doesn´t exist the attritubes X and Y. You need to take the element input and access to attr X or Y:
*<form >
first input:<br>
<input type="text" y="Y" value=85>
<br>
second input:<br>
<input id="id-x" type="text" x="X" value=15>
<br><br>
<input id="id-y" type="submit" value="Submit">
</form>
<button type="button" onclick="func1(document.getElementById('id-x').x, document.getElementById('id-y').y)">Try it</button>*
Add id to <input>s, and convert their .value into number:
function func1 (x,y){
var z=(+x)+(+y);
alert(z);
}
<form >
first input:<br>
<input type="text" id="Y" name="Y" value=85>
<br>
second input:<br>
<input type="text" id="X" name="X" value=15>
<br><br>
<input type="submit" value="Submit">
</form>
<button type="button" onclick="func1(document.getElementById('X').value,document.getElementById('Y').value)">Try it</button>
Well the error message is clear: you must define variables if you want to use them. Javascript engine doesn't know what x and y should be in your case.
So you need to select input element first and then take its value. How to select element? You need to identify it somehow. For example by giving it an id:
<input type="text" id="Y" value=85>
<input type="text" id="X" value=15>
I replaced meaningless x, y attributes with id. Then ugly usage would be:
<button type="button" onclick="func1(Number(document.querySelector('#X').value), Number(document.querySelector('#Y').value))">Try it</button>
Of course this is not very convenient to use. There is more modern way to bind event handlers, using addEventListener method. Again, give the button some id:
<button type="button" id="button">Try it</button>
And then all together it will become:
<form>
first input:<br>
<input type="text" id="Y" value=85> <br>
second input:<br>
<input type="text" id="X" value=15>
<br><br>
<input type="submit" value="Submit">
</form>
<button type="button" id="button">Try it</button>
<script>
document.querySelector('#button').addEventListener('click', function() {
var x = Number(document.querySelector('#X').value),
y = Numberdocument.querySelector('#Y').value);
func1(x, y);
});
function func1 (x, y) {
var z = x + y;
alert(z);
}
</script>
One more important note. You need to pass numbers to func1 function, otherwise + operator will behave weird. The problem here is that input elements value is always a String (numeric string in your case), and + acts like concatenation operator if used with strings. So you need to explicitly cats string to number, for example with Number function.
If you dont want to change anything in your markup, you could simply axtract the values with document.querySelector :
function callFunc() {
func1(parseInt(document.querySelector('[y="Y"]').value),
parseInt(document.querySelector('[x="X"]').value));
}
call callFunc() instead :
<button type="button" onclick="callFunc();">Try it</button>
demo -> http://jsfiddle.net/s2z13q14/
Related
I'm new to Javascript and trying to adapt a script I found online but I'm unable to extract the value entered in the first name text field. I don't understand what I'm getting wrong. Please can someone take a look at it please? Thank you.
function myFunction() {
var x = document.getElementById("fname").value;
document.getElementById("demo").innerHTML = "Found " + x;
}
<form id="myForm" action="/action_page.php">
First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>
<button onclick="myFunction()">Get it</button>
<p id="demo"></p>
You are using document.getElementById() to get the value of your element.
It means your element must have the id attribute. In your case, you only have the name attribute for your element. So it should be done this way.
<!DOCTYPE html>
<html>
<body>
<form id="myForm" action="/action_page.php">
First name: <input type="text" name="fname" id="fname"><br>
Last name: <input type="text" name="lname" id="lname"><br>
<input type="submit" value="Submit">
</form>
<button onclick="myFunction()">Get it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("fname").value;
document.getElementById("demo").innerHTML = "Found " + x;
}
</script>
</body>
</html>
I added the id attribute to your form elements.
I'm trying to get the output to be what the user types in to the input field but it says "undefined" when I press submit. Why is this and how do I fix it, Thanks
function myFunction() {
document.getElementById("output").innerHTML = document.getElementById("input").value;
}
<form id="input" action="/action_page.php">
input: <input type="text" name="input"><br><br>
<input type="button" onclick="myFunction()" value="Submit">
</form>
<p id="output"></p>
I got it, i had 2 things with the same id
You need to add an id to your input field and not the form. Or you need to create a new id for the input field.
function myFunction() {
document.getElementById("output").innerHTML = document.getElementById("input").value;
}
<form action="/action_page.php">
input: <input type="text" name="input" id="input"><br><br>
<input type="button" onclick="myFunction()" value="Submit">
</form>
<p id="output"></p>
You could also use selectors #input > [type=text] like this:
function myFunction() {
document.getElementById("output").innerHTML = document.querySelector("#input > [type=text]").value;
}
<form id="input" action="/action_page.php">
input: <input type="text" name="input"><br><br>
<input type="button" onclick="myFunction()" value="Submit">
</form>
<p id="output"></p>
you are trying to get the value of element whose id is input as per the javascript code:
document.getElementById("input").value
Now the form has this id, so it is giving you undefined.
Assign another id to your input type="text" and use it in document.getElementById("input").value , your code will work fine
I'm trying to input 2 parameters and output it an another TEXTBOX.
This is my code:
<!DOCTYPE html>
<html>
<head>
<script src="proj4js/lib/proj4js/lib/proj4js-compressed.js"></script>
</head>
<body>
<script>
function func1 (x,y){
var z=x+y
document.getElementById("Z").innerHTML = z;
}
</script>
<form >
first input:<br>
<input id="Y" type="text" y="Y" value=85>
<br>
second input:<br>
<input id="X" type="text" x="X" value=15>
<br>
The Answer:<br>
<input id="Z" type="text" z="Z" >
<br><br>
</form>
<button type="button" onclick="func1(parseInt(document.getElementById('X').value),parseInt(document.getElementById('Y').value))">Try it</button>
What is wrong here? I tried this to show the result as simple paragraph and I succeed, but I need to display it in a textbox.
Replace this:-
document.getElementById("Z").innerHTML = z;
with
document.getElementById("Z").value = z;
An <input> element uses value and not innerHTML:
document.getElementById("Z").value = z;
I'm trying to make a form which accepts values from the user and then passes those values to a JS function in the same file for some calculations. I'm just trying to print the values to the console right now, but I keep getting the error "Object #<HTMLDocument> has no method 'getElementByID'". Here is the code:
<!DOCTYPE html>
<html>
<body>
<form action="javascript:formHandler();" method="get">
<h1 align="center">Set the parameters you would like to visualize</h1>
Center Frequency: <input type="text" name="cf" id="cf"><br>
Bandwidth: <input type="text" name="bw" id="bw"><br>
Number of Bins: <input type="text" name="bins" id="bins"><br>
Number of Values to be Visualized: <input type="text" name="values" id="values"><br>
<input type="submit" value="Submit">
</form>
<script>
function formHandler()
{
console.log(document.getElementByID("cf")); // This is where I'm getting the error
}
</script>
</body>
</html>
your document.getElementByID should have a lowercase d at the end and you should also add .value, like so
document.getElementById("id").value
to get the value of whats being pass or typed
There is a typo error. It should be getElementById and not getElementByID.
You can print the value to console as below:
console.log(document.getElementById("cf").value);
Better if you do like this
<form action='somepage.html' OnSubmit="return formHandler();" method="get">
<h1 align="center">Set the parameters you would like to visualize</h1>
Center Frequency: <input type="text" name="cf" id="cf"><br>
Bandwidth: <input type="text" name="bw" id="bw"><br>
Number of Bins: <input type="text" name="bins" id="bins"><br>
Number of Values to be Visualized: <input type="text" name="values" id="values"><br>
<input type="submit" value="Submit">
</form>
<script type='text/javascript'>
function formHandler()
{
console.log(document.getElementById("cf").value);
return true;
}
</script>
Why does the following code not add another text input field when clicking on the add another field input button?
<html>
<head>
<script>
function add_field()
{
var elem = document.createElement("input");
elem.setAttribute('type','text');
elem.setAttribute('name','user');
document.body.insertBefore(elem, document.getElementById('su'));
}
</script>
</head>
<body>
<form name="input" method="get">
Put input here:<br>
<input type="text" name="user">
<input type="button" onclick="add_field()" value="Add another field"><br>
<input id="su" type="submit" value="Submit"><br>
</form>
</body>
</html>
According to the MDN reference page, you need to call parent.insertBefore(newElem, referenceElem). In your example, I suppose that <form> is the parent, not <body>. Changing the last line of your function to this:
var target = document.getElementById('su');
target.parentNode.insertBefore(elem, target);
will make it work.
jQuery solution here
<form name="input" method="get">
Put input here:<br>
<input id='ap' type="text" name="user">
<input id="addField" type="button" value="Add another field"><br>
<input id="su" type="submit" value="Submit"><br>
</form>
JavaScript
$('#addField').click(function(e)
{
$('<input type="text" />').insertBefore('#su')
});