extract value from field in javascript - javascript

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

Related

How would I select an input from a form and store it in a variable?

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 can't extract element value in javascript

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.

How to get the search box value in <p> tag - HTML,JS

Am new to javascript i foud this one in w3schools.com - Entering pincode in search box will show in <p> tag !! How to do ? any help appreciated. Thanks in advance
HTML :
<form class="form1" role="search" method="get" action="search-pincode.html">
<input class="pincode1" type="number" placeholder="Enter Postcode" id="user-pincode">
<button class="submit" type="submit" formaction="search-pincode.html" onclick="myFunction()">Check</button>
</form>
JS SCRIPT :
<script>
function myFunction() {
var x = document.getElementById("user-pincode").value;
document.getElementById("user-pincode-show").innerHTML = x;
}
</script>
OUTPUT : search-pincode.html
<h1 class="search-h1-contact">
Yes, we install CCTV in <p id="user-pincode-show"></p>
</h1>
For one, you will not see the result long enough because after clicking the button, you are being redirected to search-pincode.html. Try changing type="submit" to type="button"
function myFunction() {
var x = document.getElementById("user-pincode").value;
document.getElementById("user-pincode-show").innerHTML = x;
}
<form class="form1" role="search" method="get" action="search-pincode.html">
<input type="number" placeholder="Enter Postcode" id="user-pincode">
<button type="button" onclick="myFunction()">Check</button>
</form>
<h1 class="search-h1-contact">
Yes, we install CCTV in
<p id="user-pincode-show"></p>
</h1>
If what you are planning is to pass the value of the input to search-pincode.html, and user-pincode-show is inside it, then using JavaScript is not proper way to do it
If you want to avoid redirecting on form submition you can declare an event listener using EventTarget.addEventListener() to handle the click event and call e.preventDefault in the function handler..
Also notice that there is no need to add formaction="search-pincode.html" in the button element because the form has the attribute action="search-pincode.html"
And last thing: With in the h1 element you can better use a span element instead of p.
<h1>Yes, we install CCTV in <span id="user-pincode-show"></span></h1>
Code example:
document
.querySelector('button.submit')
.addEventListener('click', function (e) {
e.preventDefault();
var x = document.querySelector('#user-pincode');
document.querySelector('#user-pincode-show').innerHTML = x.value;
});
<form class="form1" role="search" method="get" action="search-pincode.html">
<input class="pincode1" type="number" placeholder="Enter Postcode" id="user-pincode">
<button class="submit" type="submit">Check</button>
</form>
<h1>Yes, we install CCTV in <span id="user-pincode-show"></span></h1>
function myFunction() {
var x = document.getElementById("user-pincode");
document.getElementById('user-pincode-show').innerHTML = x.value;
}
<form class="form1" role="search" method="get" action="search-pincode.html">
<input type="number" placeholder="Enter Postcode" id="user-pincode">
<button type="button" onclick="myFunction()">Check</button>
</form>
<h1 class="search-h1-contact">
Yes, we install CCTV in
<p id="user-pincode-show"></p></h1>

Adding to input field a value with javascript

I have a Javascript code that should update a form input value, but it does not work.
Here is the code:
<script>
function up2(mul)
{
var passcode = parseInt(document.getElementById("passcode").value);
var nou = mul;
var resultat = passcode+nou;
document.login.passcode.value = resultat;
}
function formSubmit()
{
document.getElementById("login").submit();
}
</script>
And the html:
<body OnLoad="document.login.passcode.focus();">
<h1>FORM</h1>
<hr>
<form name="login" method="post" action="login.php">
<input type="number" name="passcode">
<input type="submit" value="Entra">
</form>
<center>
<button onclick="up2('1')">1</button>
<button onclick="up2('2')">2</button>
<button onclick="up2('3')">3</button><br>
<button onclick="up2('4')">4</button>
<button onclick="up2('5')">5</button>
<button onclick="up2('6')">6</button><br>
<button onclick="up2('7')">7</button>
<button onclick="up2('8')">8</button>
<button onclick="up2('9')">9</button><br>
<button onclick="up2('0')">0</button>
<br><br>
<button onclick="formSubmit()">ENTRA</button>
</center>
</body>
When the Javascript was only document.login.passcode.value = mul; it changed the input value with the number pressed (it didn't add the new number to the one that's in the field). Now I want to make a passcode login, and it should add the number pressed to the field.
If there's a way to do it with jQuery it would be ok.
You are using getElementById() but haven't ID attributes on your HTML elements
<input type="number" name="passcode">
should be
<input type="number" id="passcode" name="passcode">
FYI, you have the same error on your <form> tag.

Why does this code not add another field when clicking on the `add another field` input button?

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

Categories