This question already has answers here:
Passing html values into javascript functions
(4 answers)
Closed 9 years ago.
I am learning HTML/JavaScript and am writing a simple site to test what I've learned so far.
I am trying to get the firstname and lastname entered by the user from an input form and then pass these names to a JavaScript function but for some reason, all I see in my popup window is:
Hello [object HTMLInputElement]
This is my html code:
<!DOCTYPE html>
<html>
<head>
<title>Daynesh's Test Site</title>
<script>
function addUser(first, last)
{
alert("Hello " + first);
}
</script>
</head>
<body>
<h1>Registered Users</h1>
<p>Enter user name:</p>
<form>First name: <input type="text" name="firstname">
Last name: <input type="text" name="lastname">
<input type="submit" value="Submit" onclick="addUser(firstname,'right')">
</form>
<hr>
<h3>Output</h3>
</body>
</html>
Can someone please explain what I'm doing wrong? I'm sure its something very simple that I'm not understanding here.
Thanks in advance!
in your code
onclick="addUser(firstname,'right')"
firstname is nothing you don't define it before so you should define it in javascript or
get value from input directly
this your code after fix
<!DOCTYPE html>
<html>
<head>
<title>Daynesh's Test Site</title>
<script>
function addUser(first, last)
{
alert("Hello " + first);
}
</script>
</head>
<body>
<h1>Registered Users</h1>
<p>Enter user name:</p>
<form>First name: <input type="text" name="firstname" id="firstname">
Last name: <input type="text" name="lastname">
<input type="submit" value="Submit" onclick="addUser(document.getElementById('firstname').value,'right')">
</form>
<hr>
<h3>Output</h3>
</body>
</html>
i hope my answer help you
document.getElementByName('firstname').value
See a more detailed answer at: JavaScript: how to get value of text input field?
Related
I am trying to teach myself javascript but I not getting very far, I cant figure what I am doing wrong. I've created a function ,fixedSpending(),that takes two inputs num1 and num2 and adds them. I want the function to return the total when the user hits the "=" button. So far this is not happening, im getting an uncaught reference error on the console because fixedSpending() is not defined but I dont understand why.
Any help or learning material would be appreciated.
<html>
<head>
<title>
Budget Form
<script type="text/javascript">
function fixedSpending(){
var num1=parseFloat(document.getElementById("num1").value)
var num2=parseFloat(document.getElementById("num2").value)
return document.getElementById('result').value= num1 + num2;
}
</script>
</title>
</head>
<body>
<h2></h2>
<br>
num1: <input type="text" id="num1" maxlength="10"><br>
num2: <input type="text" id="num2" maxlength="10"><br>
<input type="Button" value= "=" onclick="fixedSpending();"><br>
Result: <input type="text" id="result">
</body>
</html>
Uncaught ReferenceError: fixedSpending is not defined
Your HTML seems to be malformed, as you have your <script> tag inside your <title> tag. Your code should work if you just move it outside of the tag like so:
<html>
<head>
<title>Budget Form</title>
<script type="text/javascript">
function fixedSpending(){
var num1=parseFloat(document.getElementById("num1").value)
var num2=parseFloat(document.getElementById("num2").value)
return document.getElementById('result').value= num1 + num2;
}
</script>
</head>
<body>
<h2></h2>
<br>
num1: <input type="text" id="num1" maxlength="10"><br>
num2: <input type="text" id="num2" maxlength="10"><br>
<input type="Button" value= "=" onclick="fixedSpending();"><br>
Result: <input type="text" id="result">
</body>
</html>
First, pull the script out of your title tag, right now it's nested into it.
Second - Move the script down to just above the closing body tag (this one ). This is to ensure that the form fields you're trying to manipulate and use data from have rendered prior to doing anything with them, and is common practice.
Third - Remove the word "return" from your function. This function doesn't need to explicitly return anything, as you're not using the return value for anything. You just want the function to set the value of the result field. So just remove the word "return" from that last line of your function.
As #Bjarke noted, your script is not embedded correctly. You should put the script just above the closing </body> tag. And you do not have to use return statement, since you are just assigning a value to an input field. Try:
<html>
<head>
<title>
Budget Form
</title>
</head>
<body>
<h2></h2>
<br>
num1: <input type="text" id="num1" maxlength="10"><br>
num2: <input type="text" id="num2" maxlength="10"><br>
<input type="button" value= "=" onclick="fixedSpending();"><br>
Result: <input type="text" id="result">
<script>
function fixedSpending() {
var num1 = parseFloat(document.getElementById("num1").value)
var num2 = parseFloat(document.getElementById("num2").value)
document.getElementById('result').value = num1 + num2;
};
</script>
</body>
</html>
Test this code on jsfiddle: https://jsfiddle.net/mzvnfow2/2/
This question already has answers here:
Why JS function name conflicts with element ID?
(3 answers)
Closed 4 years ago.
I'm very new to this and I can't figure out whats wrong with my school project. I think maybe my javascript file isn't linked correctly, or maybe the code is just broken?
// }
// Commented out above "}" - Edits must be at least 6 characters
function repost() {
var epost = document.getElementById('epost');
var repost = document.getElementById('repost');
if (epost.value != repost.value) {
repost.setCustomValidity('Epost adresserna måste matcha.');
} else {
// input is valid -- reset the error message
repost.setCustomValidity('');
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Skapa konto</title>
<link href="Stilmall.css" rel="stylesheet" type="text/css">
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/abel:n4:default.js" type="text/javascript"></script>
<script src="reg.js" type="text/javascript"></script>
</head>
<body>
<div class="form1">
<form name="form2" id="form3" method="post" onsubmit="return validateForm();" action="tack.html">
<p class="form_text">
<input type="text" id="epost" placeholder="E-post" required>
<input type="text" id="repost" placeholder="Repetera E-post" required oninput="repost(this)">
</p>
<p class="form_text">
<input type="submit" id="sumbit" value="Registrera">
</p>
</form>
</div>
</body>
</html>
Hmm, this is a bit tricky but your id and function name both are "repost", in this situation you will get an error saying repost is not a function and you have to change the name of function or id. this has been discussed here : Why JS function name conflicts with element ID?
Also don't forget to fix the typo in your if condition.
Does anyone know how can I resolve the following: I want the form input by the user, to be alerted in a different HTML file.
This is what I wrote so far. It works for the id called 'name', but I dont know why it does not for the 'position'.
"index.html" file:
<script>
function myFunction() {
name = document.getElementById("name").value;
position = document.getElementById("position").value;
window.location.replace("signature.html");
return false;
}
</script>
<form class="formulario" onsubmit="return myFunction()">
Name: <input type="text" name="name" id="name"><br>
Position: <input type="text" name="position" id="position"><br>
<br>
<input type="submit" value="Generate Signature">
</form>
"signature.html" file - notice the alert(name) and the alert(position) => the alert(name) works, but not the alert(position). I want to understand how to fix that please.
<html>
<head>
</head>
<body>
<div class="signature_general">
<div class = "signature_middle">
<div id = "signature_details">
<font size="2px">Regards,</font><br>
<b><font color="#808080" size="3px" id="nameInput">Francisco Jurado</font></b><br>
<font size="2px" id="posInput">Accounting Systems Team Leader</font>
</div>
</div>
</div>
<script>
alert(name);
alert(position);
</script>
</body>
</html>
Thanks very much
Edit: I have noticed that I am getting an error, in which "position" is "undefined". Does anyone knows?
You can change your html file as:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form class="formulario" action="signature.html" method="get">
Name: <input type="text" name="name" id="name"><br>
Position: <input type="text" name="position" id="position"><br>
<br>
<input type="submit" value="Generate Signature">
</form>
</body>
</html>
And your signature.html file as :
<html>
<head>
</head>
<body>
<div class="signature_general">
<div class = "signature_middle">
<div id = "signature_details">
<font size="2px">Regards,</font><br>
<b><font color="#808080" size="3px" id="nameInput">Francisco Jurado</font></b><br>
<font size="2px" id="posInput">Accounting Systems Team Leader</font>
</div>
</div>
</div>
<script>
var values = window.location.search.substring(1).split('&')
var name = values[0].split('=')[1]
var position = values[1].split('=')[1]
alert(name)
alert(position)
</script>
</body>
</html>
That name you are setting in index.html is not the same name you are printing in the alert of signature.html.
You can see this by renaming name to name2 in both places.
If you want to pass those variables from one page to another, I suggest using query strings how to exchange variables between two HTML pages?
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
i wrote a program using javascript for showing error message beside field instead of alerting but it is not working please help me to work the program
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script type="text/javascript">
function check()
{
if(document.getElementById('firstname').value==NULL || myform.firstname.value.length==0)
{
document.getElementById('errorname').value="this is an invalid name";
}
}
</script>
</head>
<body>
<form name="myform">
<p>name</p>
<input type="text" name="firstname" onblur="check()"/>
<span id="errorname"></span>
<br/><input type="button" value="submit" />
</form>
</body>
</html>
you have not given the id to you textbox also pass the value of textbox into the function
like this
<input type="text" name="firstname" id="firstname" onblur="check(this.value)"/>
And JS Function
function check(value)
{
if(value.trim()=="")
{
document.getElementById('errorname').innerHTML="this is an invalid name";
}
}
SEE FIDDLE DEMO
You are not provided ID for your input field. Add an ID and access your input field.
function check(){
if(document.getElementById('firstname').value==""){
document.getElementById('errorname').innerHTML ="this is an invalid name";
}
}
And change your html field like this.
<input type="text" name="firstname" id="firstname" onblur="check()"/>
HTML:
<form id="form">
<p>name</p>
<input type="text" id="firstname" name="firstname" /> <span id="errorname"></span>
<br/>
<input type="submit" value="Submit" />
</form>
JavaScript:
var form = document.getElementById('form'),
firstName = document.getElementById('firstname'),
errorMessage = document.getElementById('errorname');
function check(event) {
event.preventDefault();
if (firstName.value === '' || !firstName.value.length) {
console.log('here')
errorMessage.innerText = 'This is an invalid name';
} else {
errorMessage.innerText = '';
}
}
form.addEventListener('submit', check);
JSFiddle example:
http://jsfiddle.net/2etd93jL/2/
You have used document.getElementById('firstname') but your input input type="text" name="firstname" doesn't have an id, only a name. try adding id="firstname" to the input box.
Multiple errors in your code listing down below:
Use of NULL: it is null and not NULL.
No id assigned as firstname and checking for that in the if loop
to give value to span need to use innerHTML
So your HTML code:
<form name="myform">
<p>name</p><input id="firstname" type="text" name="firstname" onblur="check()"/><span id="errorname"> </span>
<br/><input type="button" value="submit" />
</form>
JS Code:
function check()
{
if(document.getElementById('firstname').value==null || myform.firstname.value.length==0)
{
document.getElementById('errorname').innerHTML="this is an invalid name";
}
}
Working Fiddle
This is almost your code, few changes did to meet the requirement.
Checkout the fiddle
function check(){
if(document.getElementById('firstname').value=='' || !document.getElementById('firstname').value.length){
document.getElementById('errorname').innerHTML="this is an invalid name";
}
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
<script type="text/javascript">
function check() {
if (document.myform.firstname.value === null || myform.firstname.value.length == 0) {
document.getElementById('errorname').innerHTML = "this is an invalid name";
}
}
</script>
</head>
<body>
<form name="myform">
<p>name</p>
<input type="text" name="firstname" onblur="check()" /><span id="errorname"> </span>
<br />
<input type="button" value="submit" />
</form>
</body>
</html>
I have more than 5 card types and each card as different validation, when user change the card type, the reqpattern will change and i need to pass changed reqpattern in callonkeyup function.
Please tell me how to pass changed reqpattern in callonkeyup function.
callonkeyup(this,'AccountNumber',this.getAttribute('reqpattern'))
<input type="tel" reqpattern="^[0-9]+\$"
onblur="callonkeyup(this,'AccountNumber',this.getAttribute('reqpattern'));"
value="" id="AccountNumber"/>
Why not just pass the req pattern within the function call:
<input type="tel" onblur="callonkeyup(this,'AccountNumber', '^[0-9]+\$');" value="" id="AccountNumber"/>
I am not able to reproduce your issue with your code.
I have tried with the below code snippet, Can you please check it at your hand?
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<input type="tel" reqpattern="^[0-9]+\$"
onblur="callonkeyup(this,'AccountNumber',this.getAttribute('reqpattern'));"
value="" id="AccountNumber"/>
<input type="tel" reqpattern="^[a-z]+\$"
onblur="callonkeyup(this,'AccountName',this.getAttribute('reqpattern'));"
value="" id="AccountName"/>
<script>
function callonkeyup(obj,txtType,rpattern)
{
alert(obj);
alert(txtType);
alert(rpattern);
}
</script>
</body>
</html>
Let me know if any concern.