Is it possible to get a dozen results from this single basic calculation? I have two output textboxes in the sample code; how can I get these two fields to work?
<!DOCTYPE html>
<html lang = "en">
<head>
<title> multiple results calculation </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="style" href="css/main.css" type"text/css"/>
<!-- I need multiple results from single calculation!
<script type="text/javascript">
function sum()
{
var width = document.multiple results.width.value;
var height = document.multiple results.value;
var sum = parseInt(width) * parseInt(height) /144;
document.getElementById('Calculate').value = sum;
document.getElementById("results1").readOnly=true;
document.getElementById("results2").readOnly=true;
var result1= $1.99;
var result2= $2.99;
document.getElementById('Calculate').value = sum * result1;
document.getElementById('Calculate').value = sum * result2;
}
</script>
-->
</head>
<body>
<div>
<H2> Multiple instant results from single calculation</h2>
<p> the goal eventually is to have about a dozen results from this single calculation
</div>
<form name="multiple results">
<label for="width"> Width: </label>
<input type="number" <id="width" maxlength="4" size="10" value=""/>
<label for="height"> Height: </label>
<input type="number" <id="height" maxlength="4" size="10" value=""/>
<input type="button" name="button" value="Calculate" onClick="sum"/>
<div>
<label for="result1"> Result1: $ </label>
<input type="number" id="result1" name="result1"/>
<label for="result2"> Result2: $ </label>
<input type="number" id="result2" name="result2"/>
</div>
</form>
</body>
</html>
I found a solution by removing the first document.getElementById('Calculate').value = sum;, changed the remaining getElementById's and input type's to result and result2 also added the missing value="" to input, not necessary but renaming Id's helped me
Related
I am getting an error when trying to check if an input field is empty or not. I tried the function with First Name input Field but not working.
I am trying to check if the First Name input field is empty the input border should turn red if not the border should stay the same.
HERE IS MY CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercise 2</title>
<script type="text/javascript">
function validateField(fieldID){
check = document.getElementById("fieldID");
if(check.value.length == 0){
check.style.borderColor ="red";
}
}
</script>
</head>
<body>
<h1>Flight Reservation</h1>
<form method="POST" action="">
<label for="userFirstName">First Name:</label><br>
<input type="text" name="userName" id="userFirstName" onblur="validateField(userFirstName);">
<br>
<label for="userLastName">Last Name:</label><br>
<input type="text" name="userLast"id="userLastName">
<br>
<label>class:</label>
<label for="businessRadio">Business</label>
<input type="radio" name="ticketType" id="businessRadio">
<label for="economyRadio">Economy</label>
<input type="radio" name="ticketType" id="economyRadio">
<br>
<label for="wheelchair">Wheelchair</label>
<input type="checkbox" name="wheelchair" id="wheelchair">
<br>
<label for="passengers">Passengers:</label>
<input type="number" name="passengers" id="Passengers">
<br>
<input type="submit" name="Send" >
<input type="reset" name="Cancel">
</form>
</body>
</html>
You are passing fieldId and then trying to access with "" which actually converts the fieldId to a string. I have fixed the issue, please check the code below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercise 2</title>
<script type="text/javascript">
function validateField(fieldID){
check = document.getElementById(fieldID);
if(check.value.length == 0){
check.style.borderColor ="red";
}
}
</script>
</head>
<body>
<h1>Flight Reservation</h1>
<form method="POST" action="">
<label for="userFirstName">First Name:</label><br>
<input type="text" name="userName" id="userFirstName" onblur="validateField('userFirstName');">
<br>
<label for="userLastName">Last Name:</label><br>
<input type="text" name="userLast"id="userLastName">
<br>
<label>class:</label>
<label for="businessRadio">Business</label>
<input type="radio" name="ticketType" id="businessRadio">
<label for="economyRadio">Economy</label>
<input type="radio" name="ticketType" id="economyRadio">
<br>
<label for="wheelchair">Wheelchair</label>
<input type="checkbox" name="wheelchair" id="wheelchair">
<br>
<label for="passengers">Passengers:</label>
<input type="number" name="passengers" id="Passengers">
<br>
<input type="submit" name="Send" >
<input type="reset" name="Cancel">
</form>
</body>
</html>
The error occurs when you are trying to get check.value.length when check === null. So this sentences it's returning null value:
check = document.getElementById("fieldID");
Try to change that line to:
check = document.getElementById(fieldID);
Because you are writting a literal string, not using the variable.
There are two problems with the above code:
1: change below line of code
check = document.getElementById("fieldID");
to
check = document.getElementById(fieldID);
2: use string literals to pass id of the field to funtion called onblur
onblur="validateField(userFirstName);"
replace above line with
onblur="validateField('userFirstName');"
I am trying to create a simple form using Javascript, but I am facing an issue while trying to display somethings on the console. The issue here is that whenever I click on the submit button, Nothing is displayed on the console despite giving the command e.preventdefault(). At present I want the text Hello to be displayed on console when it satisfies the condition, but even though the condition is satisfied, nothing is displayed.
Herewith attaching the Javascript and HTML code for the same
const passlength = 10;
const firstname = document.getElementById("firstname");
const lastname = document.getElementById("lastname");
const emailid = document.getElementById("emailid");
const password = document.getElementById("pass");
const confirmpassword = document.getElementById("passconfirm");
const phonenumber = document.getElementById("phno");
const form = document.querySelector(".mainform");
function testfunc() {
console.log(type(emailid));
}
function checkpass(pass) {
if (pass>=passlength) {
console.log("Hello");
}
else{
console.log("Out");
}
}
form.addEventListener('submit',function(e){
e.preventDefault();
checkpass(password);
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register with us</title>
</head>
<body>
<div class="mainform">
<form>
<label for="firstname">First name:</label>
<input type="text" id="firstname" name="firstname"><br>
<label for="lastname">Last name:</label>
<input type="text" id="lastname" name="lastname"><br>
<label for="emailid">Email ID:</label>
<input type="email" id="emailid" name="emailid"><br>
<label for="pass">Enter password:</label>
<input type="password" id="pass" name="pass"> <br>
<label for="passconfirm">Confirm password:</label>
<input type="password" id="passconfirm" name="passconfirm"> <br>
<label for="phno">Phone number:</label>
<input type="number" id="phno" name="phno">
<br> <br>
<input type="submit" value="Submit" id="submit">
</form>
</div>
</body>
</html>
The problem is in your If statement. You are comparing a number with an HTML element. You still need these two.
.value returns the value of the html element
https://www.w3schools.com/jsref/prop_text_value.asp
.length returns the length of a string
https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String/length
This is how you compare two numbers, as you intended.
So your new IF condition must be:
(pass.value.length>=passlength)
This is the HTML part of it. I am super new to javascript and my current notes arent too helpful. I have declared my three numbers so far, next is determining the if/if else statements and getting the buttons to work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- saved from url=(0014)about:internet -->
<title>Highest Number</title>
<script src="clientCode/Lab4PartBScript.js"></script>
</head>
<body>
<form action=#>
<h2>Determine Highest Number</h2>
<p>
Enter three numbers:<br />
1. <input type="text" id="txtFirst" /><br />
2. <input type="text" id="txtSecond" /><br />
3. <input type="text" id="txtThird" />
</p>
<p>
Highest Number:<input type="text" readonly="readonly" id="txtHighest" /><br />
</p>
<p>
<input type="button" value="Determine Highest Number" id="btnDetermine" onclick="btnDetermine_onclick()" />
<input type="reset" />
</p>
</form>
</body>
</html>
After getting the three numbers from your HTML, you might use Math.max() function.
Example:
let num1 = 3, num2 = 5, num3 = 1;
let higherNumber = Math.max(num1, num2, num3);
Also I recommend you to take a look on https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max and visit MDN's documentation to improve your knowledge of Javascript and as future reference. Also take a look on https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps to setup your Javascript if you need further help on it.
I need to do a simple homework where you enter two integers in two text fields of a form and then you compute the sum and you print it in a "text field (not editable)". My program seems to work but it prints the right output and immediately reload the page. I want the page to remain with the printed output if the user does not click again on "submit" button
Here is my code HTML & JS :
function updateExpr() {
var x1 = document.getElementById("n1").value;
var x2 = document.getElementById("n2").value;
var sum = +x1 + +x2;
document.getElementById("sum").innerHTML = +x1 + +x2;
}
<!DOCTYPE html>
<html>
<head>
<title>Number in a form</title>
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="function.js">
</script>
</head>
<body>
<div id="mainDiv">
<H3>Insert two positive numbers</H3>
<form>
First number:<br>
<input id="n1" type="text" name="firstname"><br>
Second number:<br>
<input id="n2" type="text" name="lastname">
<BR>
<input type="submit" value="Submit" onClick="updateExpr()"/><BR><BR>
</form>
The sum is:<br>
<output id="sum" name="x" for="a b"></output>
</div>
<noscript>
Sorry: Your browser does not support or has disabled javascript
</noscript>
</body>
</html>
When form is submited, the page will be reloaded. To prevent this you should change input type attribute from submit to button.
<input type="submit" value="Submit" onClick="updateExpr()"/>
to
<input type="button" value="Submit" onClick="updateExpr()"/>
You can simply avoid server call by changing your form tag
<form onSubmit="return false">
You dont really need a form to do something like this.
Forms send values to the backend, e.g. a server.
You only want to manipulate some front-end elements like a container to have some new text inside it.
a <form> tag typically sends you to some URI with some aprameters,
this is done by the actions attribute.
<form action="addnames.php">
for example would call the addnames.php script on your server...
You dont need a server tho..look below:
function updateExpr() {
var x1 = document.getElementById("n1").value;
var x2 = document.getElementById("n2").value;
var sum =x1 +x2;
document.getElementById("sum").innerHTML = sum;
}
<h2>HTML Forms</h2>
First name:<br>
<input id="n1" type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input id="n2" type="text" name="lastname" value="Mouse">
<br><br>
<button type="submit" onclick="updateExpr()">Submit</button>
<div id="sum">
</div>
<script>
</script>
I would recommand you to add onSubmit method to the form instead of onclick to the input.
Also you better add a return : false to your function and add onsubmit="return updateExpr()".
function updateExpr() {
var x1 = document.getElementById("n1").value;
var x2 = document.getElementById("n2").value;
var sum = +x1 + +x2;
document.getElementById("sum").innerHTML = +x1 + +x2;
return false;
}
<!DOCTYPE html>
<html>
<head>
<title>Number in a form</title>
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="function.js">
</script>
</head>
<body>
<div id="mainDiv">
<H3>Insert two positive numbers</H3>
<form onsubmit="return updateExpr()">
First number:<br>
<input id="n1" type="text" name="firstname"><br>
Second number:<br>
<input id="n2" type="text" name="lastname">
<BR>
<input type="submit" value="Submit" onClick="updateExpr()"/><BR><BR>
</form>
The sum is:<br>
<output id="sum" name="x" for="a b"></output>
</div>
<noscript>
Sorry: Your browser does not support or has disabled javascript
</noscript>
</body>
Another way of doing this would have been to add a button outside of the form linked to the function by onclick event
juste add preventDefault(), like this
function updateExpr(e) {
e.preventDefault();
var x1 = document.getElementById("n1").value;
var x2 = document.getElementById("n2").value;
var sum = +x1 + +x2;
document.getElementById("sum").innerHTML = +x1 + +x2;
}
I'm trying to calculate the gas mileage. The function works but for some reason it returns a negative number, any solutions for this?
<!DOCTYPE HTML>
<html>
<head>
<title>Gas Mileage</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function calcMPG(en,st,gal){
var total= ((parseFloat(en) - parseFloat(st)))/(parseFloat(gal));
document.milespergal.mpg.value = total;
}
</script>
</head>
<body>
<h3>Gas Mileage</h3>
<form name="milespergal">
<p>Starting Mileage:<input type="text" value="0" name="start"><br>
Ending Mileage:<input type="text" value="0" name="end"><br>
Gallons Used:<input type="text" value="0" name="gallons"><br>
<input type="button" value="submit" onclick="calcMPG(document.milespergal.start.value,document.milespergal.end.value ,document.milespergal.gallons.value)">
<br>
Miles Per Gallon:<input value="0" type="text" name="mpg"></p>
</form>
</body>
</html>
Looks like you have your parameters backwards. Try defining calcMPG as this:
//Reordered st & en
function calcMPG(st, en ,gal){
var total= ((parseFloat(en) - parseFloat(st)))/(parseFloat(gal));
document.milespergal.mpg.value = total;
}
Here's a JSFiddle