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.
Related
I'm pretty new to JavaScript and am creating a simple page to output the form values. But there's seem to be a problem that it is not showing.
<html>
<head>
<title>Return first and last name from a form - w3resource</title>
</head>
<body>
<form id="form1" onsubmit="form()">
First name: <input type="text" name="fname" value="David"><br>
Last name: <input type="text" name="lname" value="Beckham"><br>
<input type="submit" value="Submit">
</form>
<p id="firstname"></p>
<script>
function form() {
var x = document.getElementById("form1").elements[0].value;
document.getElementById("firstname").innerHTML = x;
}
</script>
</body>
</html>
I can't seem to find any problems, the console was fine with the code.
You have to stop the form from submitting.
<html>
<head>
<title>Return first and last name from a form - w3resource</title>
</head>
<body>
<form id="form1" onsubmit="return form()">
First name: <input type="text" name="fname" value="David"><br>
Last name: <input type="text" name="lname" value="Beckham"><br>
<input type="submit" value="Submit">
</form>
<p id="firstname"></p>
<script>
function form() {
var x = document.getElementById("form1").elements[0].value;
document.getElementById("firstname").innerHTML = x;
return false;
}
</script>
</body>
</html>
Use an event listener to handle the submit and preventDefault() for stopping the submission. Following code is tested and working.
<html>
<head>
<title>Return first and last name from a form - w3resource</title>
</head>
<body>
<form id="form1">
First name: <input type="text" name="fname" value="David"><br>
Last name: <input type="text" name="lname" value="Beckham"><br>
<input type="submit" value="Submit">
</form>
<p id="firstname"></p>
<script>
document.getElementById("form1").addEventListener("submit", form);
function form(e) {
e.preventDefault();
var x = document.getElementById("form1").elements[0].value;
document.getElementById("firstname").innerHTML = x;
}
</script>
</body>
</html>
<script src="script.js"></script>
</body>
</html>
For example, if i had a form like this:
<form id="form1">
<input type="text" name="item">
</form>
<button onclick="outputItem"></button>
How would I output the input from the form?
You can write a function in which you can use querySelector() to get the element to get the value of the input:
function outputItem(){
var v = document.querySelector('#form1 > input[name=item]').value;
console.log(v);
}
<form id="form1">
<input type="text" name="item">
</form>
<button onclick="outputItem()">Print</button>
<form id="form1">
<input type="text" name="item" id="item">
</form>
<button onclick="outputItem()">ShowMe</button>
<span id="response"></span>
<script>
function outputItem() {
var item = document.getElementById('item').value;
document.getElementById('response').innerHTML = item;
}
</script>
Try above one.
You can do like:
function selectInputForm(){
const selectForm = document.querySelector('#inputForm');
}
Remember to add the id to the input form you want to select:
<form id="form1">
<input type="text" name="item" id= 'inputForm' >
</form>
<button onclick="selectInputForm()"></button>
Before clicking on the button Try it you have write some text into the input. Otherwise, it can get an error - undefined.
function outputItem() {
var x = document.getElementsByName("item")[0].value;
document.getElementById("demo").innerHTML = x;
}
<form id="form1">
<input type="text" name="item">
</form>
<button onclick="outputItem()">Try it</button>
<p id="demo"></p>
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 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/
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')
});