getElementById() won't work - javascript

I want to insert a basic form into my website so my users can search for recipes. I'm having a hard time getting the javascript to find the input value from the form. Any help would be appreciated.
<!DOCTYPE html>
<html>
<head>
<script>
function searchURL()
{
var foodSearch = window.open("http://search.myrecipes.com/search.html?N=17&mFil=false&Ntt=" + "document.getElementById("searchFood").value");
};
</script>
</head>
<body>
<form>
<fieldset>
<legend>Search for Healthy Diet Recipes</legend>
<p>
Type in the name of the Recipe or Healthy Diet Food you would like to cook below:<br>
</p>
<br>
<input type="text" id='searchFood' >
<input type="button" value="Find Delicious Food" onClick="searchURL()">
</fieldset>
</form>
</body>
</html>

Do not add it into "" quotes.
Use this:
var foodSearch = window.open("http://search.myrecipes.com/search.html?N=17&mFil=false&Ntt=" + document.getElementById("searchFood").value);

Related

form to check if names match display display alert message saying whether they match or the dont match. if statment used to check the values if same

Hi guys im trying to make a form which when the user enters two values that are the using an f statement same with an onsubmit event handler. that then shows an alert message if they match. my problem is im not seen onsubmit pop up. or an alert i dont know where im going wrong please help.
function nameCheck(){
let fname = document.querySelector("#fname").value;
let fname2= document.querySelector("#fname2").value;
if (fname1 = = fname2){
alert("The names match ");
} else if{
alert("They dont match ");
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title> nameCheck</title>
<script src="java/nameCheck.js" type="text/javascript"></script>
</head>
<body>
<form action= "">
Name: <input type="text" id ="fname" name="fname">
<br><br>
RenterName: <input type="text" id ="fname2" name="fname2">
<br>
<div class = "buttons">
<input type="submit" onclick()= "nameCheck()" name = "submit" value="Submit">
<input type="reset" value="Reset">
</div>
</form>
</body>
</html>
Where to begin...
there is no onclick()="" attribute for elements, it's onclick=""
you have a space between = =
there is no fname1 variable defined
you don't have a condition after else if
if you are using alert() just for your own debugging purpose, use console.log() instead, it will save you time in a long run.
Here is the fixed code:
function nameCheck(){
let fname1 = document.querySelector("#fname").value;
let fname2= document.querySelector("#fname2").value;
if (fname1 === fname2){
alert("The names match ");
} else{
alert("They dont match ");
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title> nameCheck</title>
<script src="java/nameCheck.js" type="text/javascript"></script>
</head>
<body>
<form action= "">
Name: <input type="text" id ="fname" name="fname">
<br><br>
RenterName: <input type="text" id ="fname2" name="fname2">
<br>
<div class = "buttons">
<input type="reset" value="Reset">
<input type="submit" onclick= "nameCheck()" name = "submit" value = "Submit">
</div>
</form>
</body>
</html>
Variables
So first, in the if(fname1 = = fname2), and the variable creation, fname and fname1 do not match. Change either one so it matches the other.
if() stuff
This is the equality sign: === and you did = =. The space has to be a equal sign.
Also, the else if() is only when you want multiple if()s. else should be used for this program.
HTML Attribute
The onclick() should be onclick.

Javascript alert not displaying correctly

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?

Create a "calculation form" in javascript

so I have a project now, as an addition to my company's website, we want to show our clients how much they can save on gas by buying one of our electric cars, I'm responsible for making it happen, I don't know how to approach this using javascript, can you guys give me a hand? our marketing guy got the idea from this website, that is basically what we want, but I was hoping i could make it a little better on some aspects:
1st-the client wouldn't have to press submit to see the results, as they fill the last field, the calculated part is populated automatically, for this i've been fiddling with the onChange event, unsuccessfully though xD
here's what I have so far, it is not working, at least on dreamweaver's live mode, haven't tested it online yet as I was hoping to develop the whole thing offline:
<script type="text/javascript">
function calc(){
var km=document.getElementById(km).value;
var euro=document.getElementById(euro).value;
var consumo=document.getElementById(consumo).value;
var cem_km=consumo*euro;
var fossil_day=(cem_km*km)/100;
return fossil_day;
}
</script>
<form name="calc" id="calc" >
<p>
Km/dia
<input type="text" name="km" id="km" value="" />
</p>
<p>
€/Litro
<input type="text" name="euro" id="euro" value="" />
</p>
<p>
Litros/100km
<input type="text" onChange="calc()" name="consumo" id="consumo" value="" />
</p>
<input type="button" onClick="calc()" name="submit" id="submit" value="Calcular" />
<script type="text/javascript">
var fossil_day = calc();
document.write('<p>'+fossil_day+'</p>');
</script>
</form>
Please note that although I have this already, I wouldnt mind not doing this at all and using another solution, even if it doesnt use forms, I'm just showing what i have already so you can tell me how I'm wrong and how I can have a better approach at it
there are many errors inside your code
document.getElementById() needs the element id in brackets ''
you can't create a element with the same name,id as a function calc else it will throw an error as it's an object and not a function.
your executing the function onload... but you want it to be executed when the button is clicked & onchange.
you don't need to add value if empty and name if you use getElementById
return false in the function on buttons inside form else it could send the form and so refresh the page.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>calc</title>
<script>
function calc(){
var km=document.getElementById('km').value;
var euro=document.getElementById('euro').value;
var consumo=document.getElementById('consumo').value;
var cem_km=consumo*euro;
var fossil_day=(cem_km*km)/100;
document.getElementById('result').innerHTML=fossil_day;
return false
}
</script>
</head>
<body>
<form>
<p>Km/dia<input type="text" id="km"/></p>
<p>€/Litro<input type="text" id="euro" /></p>
<p>Litros/100km<input type="text" onChange="calc()" id="consumo" /></p>
<input type="button" onClick="calc()" value="Calcular" />
</form>
<div id="result"></div>
</body>
</html>
Useing jQuery (and html5 type="number" form fields):
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form>
<p>
Km/dia
<input type="number" name="km" id="km" value="" />
</p>
<p>
€/Litro
<input type="number" name="euro" id="euro" value="" />
</p>
<p>
Litros/100km
<input type="number" name="consumo" id="consumo" value="" />
</p>
<div id="fossil-day"></div>
</form>
<script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script>
function calculate(){
var km = $('#km').val();
var euro = $('#euro').val();
var consumo = $('#consumo').val();
var cem_km = consumo*euro;
var fossil_day = (cem_km*km)/100;
$('#fossil-day').html(fossil_day);
}
$(function() {
/*when #consumo input loses focus, as per original question*/
$('#consumo').blur(function(){
calculate();
});
});
</script>
</body>
</html>

Getting text from HTML form and pass to JavaScript function [duplicate]

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?

Posting JS variable from HTML form

Im a bit of a newbie.
Im trying to post some data I have in a JavaScript variable to my server.
Iv looked around and from what I gather I need to put it in as part of a form? is there anyway to hide this form box?
Do I place this information in the value section of the form?
Eg.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Namespace</title>
<script type="text/javascript" charset="utf-8">
functionAddPostData(){
var name = "Christopher";
var last = "Bar";
var formInfo = document.forms['info'];
name = formInfo.elements["first"].innerHTML;
last = formInfo.elements["surname"].innerHTML;
}</script>
</head>
<body>
<form action="script.php" method="post" allign="bottom">
<label for="info">
<input type="text" name="first" value="" size ="40" />
<input type="text" name="surname" value="" size ="60" />
<input type= "submit" name="submitted" value="info" allign="middle"/>
</form>
</body>
</html>
This is my best guess? Am I heading in the right direction? Is there a way to hide the form boxes?
Use hidden fields to post the data to server if you dont want to show the textbox in the UI.
<input type="hidden" name="first" value="" size ="40" />
You should set the onSubmit of form to functionAddPostData which will get called when you submit the form. Also the form should have a name atttibute since you are trying to access it by name.
The form element values should be set as below
var formInfo = document.forms['info'];
formInfo.first.value = name;
formInfo.surname.value = last;
There are a couple things wrong with the code you posted, which is why its not working. It's late so instead of a line by line analysis I will post a modified version that you can look over. I would recommend reading through an HTML guiide like W3 Schools and to also go through a good javascript tutorial (like Webmonkey. Cheers.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Namespace</title>
<script type="text/javascript" charset="utf-8">
function AddPostData(){
var name = "Christopher";
var last = "Bar";
var formInfo = document.forms['info'];
name = formInfo.elements["first"].value;
last = formInfo.elements["surname"].value;
alert(name + ' ' + last);
}</script>
</head>
<body>
<form id="info" action="script.php" method="post" align="bottom">
<p>For</p>
<input type="text" name="first" value="" size ="40" />
<input type="text" name="surname" value="" size ="60" />
<input type= "submit" name="submitted" value="info" align="middle" onclick="AddPostData();"/>
</form>
</body>
</html>

Categories