I'm trying to get certain optional fields to be required via JavaScript validation, if any of these are empty then the form should not be sent off. I have tried numerous fixes but the code still does not work. What am I doing wrong? code is below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Contact us | Bhutan</title>
<link rel="stylesheet" href="style.css" />
<script>
function validate() {
//checks to see whether the required fields are filled.
//if comment AND checkboxes AND Newsletter are empty the form will not send.
if (document.commentFrm.Comment.value=="" && document.commentFrm.newsletter.checked==false && document.commentFrm.brochure1.checked==false && document.commentFrm.brochure2.checked==false && document.commentFrm.brochure3.checked==false) {
alert("Please enter required information");
return false;
}
return true;
}
</script>
</head>
<body>
<script>
// Script that asks a user for a number and subsequently compares it to a randomly generated number.
num=prompt("Enter a number between 1 and 10");
document.write(num + "<br />");
var x=(Math.floor((Math.random()*10)+1));
if (num==x) {
alert("You have won a place on the shuttle! Your cryogenic chamber is being prepared! ");
}
else
{
alert("Go home. I'm afraid that your number " + num +" is not today's lucky number and you will not be permitted to colonise new planets.");
}
</script>
<!-- Main page header -->
<header>
<h1>Religion and Culture in Bhutan</h1>
</header>
<!-- Page Navigation -->
<nav>
<ul>
<li> Home </li>
<li>Happiness</li>
<li>Face Of Rule</li>
<li>Health</li>
<li>Religion</li>
<li>Contact Us</li>
</ul>
</nav>
<article>
<!-- Form that takes users information and emails it for marketing purposes. -->
<form name="commentFrm" onSubmit="validate()" action="mailto:connor.bulmer#live.co.uk" enctype="text/plain" method="post">
<table>
<tr>
<td>Title: </td>
<td>
<select>
<option value="Mr">Mr</option>
<option value="Mrs" selected>Mrs</option>
<option value="Ms">Ms</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
<option value="Prof">Prof</option>
</select>
</td>
</tr>
<tr>
<td>First Name: </td>
<td><input type="text" name="firstname" size="20" maxlength="20" id="firstname" required></td>
<td>Comment:</td>
</tr>
<tr>
<td>Surname: </td>
<td><input type="text" name="surname" size="20" maxlength="20" id="surname" required></td>
<td rowspan="7"><textarea name="comment" rows="12" cols="50"></textarea></td>
<td>Brochure</td>
</tr>
<tr>
<td>Email: </td>
<td><input type="email" name="email" size="50" required></td>
<td> <input type="checkbox" name="brochure1" value="luxury" ></td>
<td>luxury</td>
</tr>
<tr>
<td>Phone: </td>
<td><input type="text" name="phone" size="50" required></td>
<td><input type="checkbox" name="brochure2" value="family" ></td>
<td>family</td>
</tr>
<tr>
<td>Address 1: </td>
<td><input type="text" name="address1" size="50" required></td>
<td><input type="checkbox" name="brochure3" value="18-30"></td>
<td>18-30</td>
</tr>
<tr>
<td>Address 2: </td>
<td><input type="text" name="address2" size="50"></td>
<td>Newsletter</td>
<td><input type="checkbox" name="newsletter" value="newsletter"></td>
</tr>
<tr>
<td>Town: </td>
<td><input type="text" name="town" size="50" required></td>
</tr>
<tr>
<td>Post code: </td>
<td><input type="text" name="postcode" size="50" required></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input type="submit" name="submit" onClick="validate()" value="click here to submit" style="float: right;"></td>
</tr>
</table>
</form>
</article>
<!-- Footer leading to contact form -->
<footer>
<p>Developed for Bhutan, get in touch </p>
</footer>
</body>
</html>enter code here
change all && (and) to || (or) in the if;
change onsubmit="validate()" to onsubmit="return validate()"
change .Comment.value to .comment.value since that is the name and JS is case sensitive;
lastly remove onClick="validate()" from the button
More readable: remove all inline handlers, change name="commentFrm" to id="commentFrm" and have this in the head
window.onload=function() {
document.getElementById("commentFrm").onsubmit=function() {
//checks to see whether the required fields are filled.
//if comment OR checkboxes OR Newsletter are empty the form will not send.
if (this.comment.value=="" ||
this.newsletter.checked==false ||
this.brochure1.checked==false ||
this.brochure2.checked==false ||
this.brochure3.checked==false) {
alert("Please enter required information");
return false;
}
return true;
}
}
PS: The prompt script should use innerHTML of some container instead of document.write.
Related
I am new bee to JavaScript. I have a form which is not validated with alert button. I am having a form which is to be submitted without errors. If I submit the forms with the empty fields, an alert message should be popped up.
The following is my code:
function validate_Form() {
alert('hi how');
exit;
var tokenNo = document.forms["myForm"]["txt1"].tokenNo;
if (tokenNo == null || tokenNo == "") {
alert("Enter The Token No");
return false;
} else {
document.write("pola");
}
}
<table>
<form name="Sec_guard_form" onsubmit="validate_Form()">
<tr>
<td>Token No</td>
<td>
<input type="text" value="" name="token_no" />
</td>
</tr>
<tr>
<td>Other Property</td>
<td>
<input type="text" value="" name="other_prop" />
</td>
</tr>
<tr>
<td>Bike Number</td>
<td>
<input type="text" value="" name="bike_no" />
</td>
</tr>
<tr>
<td>bike name</td>
<td>
<input type="text" value="" name="bike_nm" />
</td>
</tr>
<tr>
<td>bike model</td>
<td>
<select option="bike model">
<option value="Activa 3G">Activa 3G</option>
<option value="shine">shine</option>
<option value="unicon">unicon</option>
<option value="yuga">yuga</option>
<option value="neo">neo</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" value="submit" />
</td>
<td>
<input type="submit" value="cancel" />
</td>
</tr>
</form>
</table>
The above is my code, for i am using the mozilla firefox as my browser. Is that an issue. My function inside the script is not even called. what am i wrong here...
You can change your javascript like this :
function validate_Form() {
var form = document.querySelector("form");
var tokenNo = form.elements.token_no.value;
if (tokenNo == null || tokenNo == "") {
alert("Enter The Token No");
return false;
} else {
document.write("pola");
}
return false;
}
and your html like this:
<form name="Sec_guard_form" onsubmit="return validate_Form()">
exit; doesn't mean anything in javascript. You have to use return. So if you return before the function does anything then it is not useful at all!
The syntax you used for selecting form element and getting its value was wrong according to me so I corrected the syntax...
Also, you might be wondering why to use return validate_form() in HTML and return false in the function. It is used just for stopping the page to refresh/redirect before the entire function gets executed!
Try this code, it worked for me... I don't know what hi how was for so I eliminated it.
You are not calling function on your submit button Please use this to call function first.
<input type="submit" value="submit" onclick="validate_Form()" />
change
<form name="Sec_guard_form" onsubmit="validate_Form()">
to
<form name="Sec_guard_form" onsubmit="return validate_Form()">
Complete html code
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<table>
<form id="Sec_guard_form" onsubmit="return validate_Form();" method="post">
<tr>
<td>Token No</td>
<td>
<input type="text" value="" name="token_no" />
</td>
</tr>
<tr>
<td>Other Property</td>
<td>
<input type="text" value="" name="other_prop" />
</td>
</tr>
<tr>
<td>Bike Number</td>
<td>
<input type="text" value="" name="bike_no" />
</td>
</tr>
<tr>
<td>bike name</td>
<td>
<input type="text" value="" name="bike_nm" />
</td>
</tr>
<tr>
<td>bike model</td>
<td>
<select option="bike model">
<option value="Activa 3G">Activa 3G</option>
<option value="shine">shine</option>
<option value="unicon">unicon</option>
<option value="yuga">yuga</option>
<option value="neo">neo</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" value="submit" />
</td>
<td>
<input type="submit" value="cancel" />
</td>
</tr>
</form>
</table>
<script>
function validate_Form()
{ alert('hi how');
var tokenNo = document.getElementById("Sec_guard_form")["token_no"].value;
if (tokenNo == null || tokenNo == "")
{
alert("Enter The Token No");
return false;
}
else
{
document.write("pola");
}
}
</script>
</body>
</html>
This is working fine
In the reserved area I wish to show errors that will show up if something doesn't go right with input. One prerequisite I have is that there must be some value within first name. If there is no value, within reserved should show "Name must be filled out".
As of right now I have an alert that shows up if the name is not filled out.
How can I make my errors be posted within the "Reserved" section?
JS:
function validateForm()
{
var x = document.forms["application"]["fName"].value;
if (x == null || x == "")
{
alert("Name must be filled out");
return false;
}
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>int222_162d16 - Assignment 3 - Home Page</title>
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/sitecss.css" type="text/css" media="screen" />
<script src='javascript/myscript.js' type='text/javascript'></script>
</head>
<body>
<form name="application" id="application" method="post" action="https://zenit.senecac.on.ca/~emile.ohan/cgi-bin/cardApplication.cgi" onsubmit="return validateForm();">
<fieldset>
<legend class="t"><img src="https://zenit.senecac.on.ca/~emile.ohan/int222/bank-logo.png" alt="Assignment #3" />Seneca Bank - Credit Card Application</legend>
<div class="clearfix">
<aside class="l">
<fieldset>
<legend>Primary Applicant's Information</legend>
<table>
<tr>
<td>First Name*</td>
<td><input type="text" name="fName" id="fName" size="20" maxlength="20" autofocus="autofocus" ></td>
</tr>
<tr>
<td>Surname*</td>
<td><input type="text" name="sName" id="sName" size="20" maxlength="30"></td>
</tr>
<tr>
<td>Date of Birth*</td>
<td><input type="text" name="dob" id="dob" size="10" placeholder="MMMYYYY" maxlength="7"></td>
</tr>
<tr>
<td>Email Address*</td>
<td><input type="text" name="email" id="email" size="20" maxlength="60"></td>
</tr>
<tr>
<td>Phone No.*</td>
<td><input type="text" name="phone" id="phone" size="20" maxlength="12"></td>
</tr>
</table>
</fieldset>
</aside>
<section class="s">
<fieldset>
<legend>Primary Applicant's Address</legend>
<table>
<tr>
<td>Home Address*</td>
<td>Apt.</td>
</tr>
<tr>
<td><input type="text" name="address" id="address" size="30" maxlength="60"></td>
<td><input type="text" name="apt" id="apt" size="5" maxlength="4"></td>
</tr>
<tr>
<td><br />City* </td>
</tr>
<tr>
<td><input type="text" name="city" id="city" size="20" maxlength="40">
</tr>
<tr>
<td><br />Province*</td>
<td><br />Postal Code</td>
</tr>
<tr>
<td>
<select id="province" name="province" size="2">
<optgroup label="Province">
<option value="Alberta">Alberta</option>
<option value="British Columbia">British Columbia</option>
<option value="Manitoba">Manitoba</option>
<option value="New Brunswick">New Brunswick</option>
<option value="Newfoundland & Labrador">Newfoundland & Labrador</option>
<option value="Nova Scotia">Nova Scotia</option>
<option value="Ontario">Ontario</option>
<option value="Prince Edward Island">PE</option>
<option value="Quebec">Quebec</option>
<option value="Saskatchewan">Saskatchewan</option>
</optgroup>
<optgroup label="Territory">
<option value="Northwest Territories">Northwest Territories</option>
<option value="Nunavut">Nunavut</option>
<option value="Yukon">Yukon</option>
</optgroup>
</select>
</td>
<td>
<input type="text" name="postal" id="postal" size="8" maxlength="7" placeholder="ANA NAN">
</td>
</tr>
</table>
</fieldset>
</section>
<aside class="r">
<fieldset>
<legend>Housing Status</legend>
<table>
<tr>
<td>Do you:</td>
<td>$Monthly Payment* </td>
</tr>
<tr>
<td><input type="checkbox" name="hStatus" id="s01" value="Own" />Own the property</td>
<td><input type="text" name="payment" id="payment" size="8" maxlength="6"></td>
</tr>
<tr>
<td><input type="checkbox" name="hStatus" id="s02" value="Rent" />Rent the property</td>
</tr>
<tr>
<td>Monthly Income*</td>
<td><input type="text" name="income" id="income" size="8" maxlength="6"></td>
</tr>
<tr>
<td>Years at current location*</td>
<td><input type="text" name="currYears" id="currYears" size="3" maxlength="2"></td>
</tr>
<tr>
<td>Pre-authorized Code*</td>
<td><input type="text" name="preCode" id="preCode" size="8"></td>
</tr>
</table>
</fieldset>
</aside>
</div>
<div class="clearfix">
<section class="s">
<fieldset>
<legend>Reserved - See below</legend>
<p><b>If you submit your application with errors and/or omissions, a list of errors and/or omissions will show here. Make the corrections and re-submit.</b></p>
<p><b>If you continue to have a problem submitting your application, make a note of the Reference No. and call us at 1-800-010-2000.</b></p>
<script>document.write</script>
</fieldset>
</section>
<aside class="l">
<fieldset>
<legend>Credit Check / Email Consent</legend>
<p><b>I consent to have a credit check performed</b></p>
<input type="checkbox" class="BoxCheck" name="creditCheck" id="c01" value="Yes" onclick="check(this);" />Yes
<input type="checkbox" class="BoxCheck" name="creditCheck" id="c02" value="No" onclick= "check(this);" />No
<br />
<p><b>I consent to have email messages sent to me</b></p>
<input type="radio" name="emailConsent" id="m01" value="Yes" />Yes
<input type="radio" name="emailConsent" id="m02" value="No" />No
<br />
Submitted on:
<script>
var d = new Date();
document.write(d.toDateString());
</script>
Ref. # <input type="text" name="refNo" id="refNo" size="8" readonly="readonly"> <br />
<!--Submit Application--> <input type="submit" value="Submit Application">
<!--Start Over--> <input type="reset" value="Start Over">
<input type="hidden" name="hName" id="hName" value="Mahmood"> <br />
<input type="hidden" name="hId" id="hId" value="int222_162d16"> <br />
</fieldset>
</aside>
</div>
</fieldset>
</form>
<footer class=f>
My zenit Account My JavaScript My CSS My Honesty
<script>
var dt=new Date(document.lastModified); // Get document last modified date
document.write('<p>This page was last updated on '+dt.toLocaleString()) + '</p>';
</script>
</footer>
</body>
</html>
Option 1:
You can use the "required" property on your input.
Option 2:
1- Create a div with style="display:none" where ever you like in your dom and assign an ID to that div. IE:
<div id="err1" style="display:none"></div>
2- In your javascript, on error:
if (x == null || x == "")
{
var errDiv = document.getElementById("err1");
errDiv.innerHTML = "Please fill input";
errDiv.style.display = 'block';
return false;
}
If I understand you correctly, just add a <span> element to your <section class="s">. Give the span an id like 'err_log' or just 'err' and use this to output the error
function validateForm()
{
var x = document.forms["application"]["fName"].value;
if (x == null || x == "")
{
alert("Name must be filled out");
document.getElementById('youridofthespan').innerHTML='Name must be filled out';
return false;
}else{
document.getElementById('youridofthespan').innerHTML='';
}
}
If you want to show and delete multiple errors, you can simply create on span for every error and do above to use them.
Hope this helps :)
Hi Please find the below form validation code. I've used html5 input attributes for most of the validation except where i need all letter for the first name and last name. The below cose is what i wrote for first name...but looks like it's not entering the if condition. Can anyone please help
and lemme know where I went wrong.....Thanks Guys!!
<!DOCTYPE html>
<html>
<head>
<script>
function formvalid(){
var uname=document.form1.usrname.value;
var letters=/^[a-zA-Z]+$/;
if (uname.value.match(letters)){
alert("Your details have been saved.Please submit the course fee at the cash counter before 13/12/2014 and collect your id card.The training will start on 23/12/2014 from 10.30am to 4.40 pm");
return true;
}else{
alert("Please Enter a valid Username");
uname.focus();
return false;
}
}
</script>
</head>
<body>
<form name="form1">
<h1> Register Online</h1>
<Table>
<tr>
<td>First Name</td>
<td><input type="text" name="usrname" required></td>
</tr>
<tr>
<td> Last Name</td>
<td><input type="text" id="usrname1" required></td>
</tr>
<tr>
<td> Email ID</td>
<td><input type="email" id="mail" pattern="[^#]+#[a-zA-Z]+\.[a-zA-Z]{2,6}" required></td>
</tr>
<tr>
<td> Roll Number</td>
<td><input type="number" min="1" id="roll" required></td>
</tr>
<tr>
<td>Training Program</td>
<td><select id="sel">
<option value="movie">Select Training</option>
<option value="andro">Android</option>
<option value="java">Java</option>
<option value="C">Robotics</option>
<option value="hack">Ethical Hacking</option>
</select></td>
</tr>
<tr>
<td>Contact Number</td>
<td><input type="number" min="1" id="number" required></td>
</tr>
<tr><td>
<Button type="submit" onclick="return formvalid()">Submit</BUTTON></td>
<td><BUTTON type="reset">Reset</BUTTON>
</td></tr>
</table>
</form>
</body>
</html>
I am trying to do simple form validation by using jQuery. Actually I am try to validate the input boxes on blur and focus. I am just validating first input for now which validate user first name.It is not functioning properly.
Can any please help me?
HTML & JS CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
Test
</title>
<style type="text/css">
.showerror{
display:block;
}
.noshowerror{
display:none;
}
.remerr{
display:none;
}
.redborder{
border:#F00 solid 1px;
background-color:yellow;
}
.greenborder {
border:#0F3 solid 1px;
background-color:#6F6;
}
</style>
</head>
<body>
<div style="width:450px">
<div style="float:left">
<table>
<form id="eg">
<tr>
<td>
<label>
Name:
</label>
<td>
<input type="text" id="name" />
</tr>
<tr>
<td>
<label>
Surname:
</label>
<td>
<input type="text" id="surname" />
</tr>
<tr>
<td>
<label>
Email:
</label>
<td>
<input type="text" id="email" />
</tr>
<tr>
<td>
<label>
Number:
</label>
<td>
<input type="text" id="number" />
</tr>
<tr>
<td>
<label>
Age:
</label>
<td>
<input type="text" id="age" />
</tr>
<tr>
<td>
<label>
Comment:
</label>
<td>
<input type="text" id="comment" />
</tr>
<tr>
<td>
<label>
Password
</label>
<td>
<input type="password" id="pwd" />
</tr>
<tr>
<td>
<label>
Confirm Password
</label>
<td>
<input type="password" id="cnfmpwd" />
</tr>
<tr>
<td colspan="2">
<input type="submit" value="test" />
</td>
</tr>
</form>
</table>
</div>
<div style="float:right">
<p id="fail" class="noshowerror" >
Please enter name
</p>
<p id="nameerr2" class="remerr">
Name is correct
</p>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
if ($("#name").val('')) {
$("#name").val('Name Please');
}
$('#name').focus(function () {
if ($('#name').val() == 'Name Please') {
$('#name').val("");
}
});
$('#name').blur(function () {
var nameRegex = /^[A-Za-z]+$/;
var fname = document.getElementById("name").value;
if (!nameRegex.test(fname)) {
$("#name").addClass('redborder');
} else if (fname == " ") {
$("#name").addClass('redborder');
} else {
$("#name").addClass('greenborder');
return false;
}
});
});
</script>
</body>
</html>
Thanks in advance
I have refined our code and its working as you intended, there were several mistake in defining the elements within table,may be you can have a look at my code on how to define it .
LIVE DEMO
HTML CODE:
<body>
<div style="width:450px">
<div style="float:left">
<form id="eg" action="/">
<table>
<tr>
<td>
<label>Name:</label>
</td>
<td>
<input type="text" id="name" />
</td>
</tr>
<tr>
<td>
<label>Surname:</label>
</td>
<td>
<input type="text" id="surname" />
</td>
</tr>
<tr>
<td>
<label>Email:</label>
</td>
<td>
<input type="text" id="email" />
</td>
</tr>
<tr>
<td>
<label>Number:</label>
</td>
<td>
<input type="text" id="number" />
</td>
</tr>
<tr>
<td>
<label>Age:</label>
</td>
<td>
<input type="text" id="age" />
</td>
</tr>
<tr>
<td>
<label>Comment:</label>
</td>
<td>
<input type="text" id="comment" />
</td>
</tr>
<tr>
<td>
<label>Password</label>
</td>
<td>
<input type="password" id="pwd" />
</td>
</tr>
<tr>
<td>
<label>Confirm Password</label>
</td>
<td>
<input type="password" id="cnfmpwd" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="test" onclick="return false;" />
</td>
</tr>
</table>
</form>
</div>
</div>
<div style="float:right">
<p id="fail" class="noshowerror">Please enter name</p>
<p id="nameerr2" class="remerr">Name is correct</p>
</div>
</body>
JS CODE:
$(document).ready(function () {
if ($("#name").val('')) {
$("#name").val('Name Please');
}
$('#name').focus(function () {
if ($('#name').val() == 'Name Please') {
$('#name').val("");
}
});
$('#name').blur(function () {
var nameRegex = /^[A-Za-z]+$/;
// var fname = document.getElementById("name").value;
var fname = $("#name").val();
alert(nameRegex.test(fname));
if (!(nameRegex.test(fname))) {
$("#name").removeClass('greenborder').addClass('redborder');
} else if (fname == " ") {
$("#name").removeClass('greenborder').addClass('redborder');
} else {
$("#name").removeClass('redborder').addClass('greenborder');
return false;
}
});
});
When your using jQuery lib, make sure you make the most of it, i have seen that there was raw javascript syntax in your code. jQuery was designed make things easier by reducing the syntax.
Edited:
I have refined the code, so that the code work on any number of times.
Happy Coding :)
$('#name').blur(function(){
trigger the blur event.
To listen for the blur event, made by the user :
$('#name').on("blur", function(){
if ($("#name").val('')) {
$("#name").val('Name Please');
}
$('#name').focus(function () {
if ($('#name').val() == 'Name Please') {
$('#name').val("");
}
can be changed by :
<input type="text" name="name" id="name" placeholder="Name Please" />
http://www.w3schools.com/tags/att_input_placeholder.asp
For your issue :
var fname = $("#name").val(); //jQuery style
$('#name').on("blur", function(){
// we want element #name a range of letters
var regexp = /^([A-Za-z])+$/;
// if the element #name contains a range of letters defined in var regexp
if (!nameRegex.test(fname)) {
$("#name").addClass('redborder');
return true;
}
// if the element #name is empty, does not contain string
if ( $("name").length === 0 ) {
$("#name").addClass('redborder');
return true;
}
// if we are still here, means that the element #name is valid
$("#name").addClass('greenborder');
return false;
}
// on focus name input
$("#name").on("focus", function() {
// if the input get the redborder class, then reset
if ( fname.hasClass("redborder") ){
fname.removeClass("redborder");
}
}
Trying to take my "Room Type" drop down and convert the values to be used in the form oninput formula. However, I'm having no luck finding anywhere that details the structure of a select box.
<form oninput="total.value = (nights.valueAsNumber * rmtp.valueAsNumber) +
((guests.valueAsNumber) * 10)">
<TABLE class="Internal Info" align="center">
<TR>
<TD><label>Full name:</label></TD>
<TD><input type="text" id="full_name" name="full_name" placeholder="Jane Doe" required></TD>
</TR>
<TR><TD>
<label>Email address:</label></TD>
<TD> <input type="email" id="email_addr" name="email_addr" required></TD></TR>
<TR>
<TD><label>Repeat email address:</label></TD>
<TD><input type="email" id="email_addr_repeat" name="email_addr_repeat" required
oninput="check(this)"></TD>
</TR>
<TR><TD><label>Arrival date:</label></TD>
<TD> <input type="date" id="arrival_dt" name="arrival_dt" required></TD></TR>
<TR>
<TD><label>Number of nights :</label></TD>
<TD><input type="number" id="nights" name="nights" value="1" min="1" max="30" required></TD>
</TR>
<TR>
<TD><label>Room Type</label></TD>
<TD><select name="rmtp" required>
<option value="80">Standard($80/N)</option>
<option value="90">Superior($90/N)</option>
<option value="110">Deluxe($110/N)</option>
<option value="130">Family($130/N)</option>
<option value="120">Riviera Suite($120/N)</option>
<option value="199">Honeymoon Package($199/N)</option>
</select>
</TD>
</TR>
<TR><TD><label>Number of additional guests (two guests included at the base price; each additional guest adds $10.00 per night):</label></TD>
<TD><input type="number" id="guests" name="guests" value="0" min="0" max="4" required></TD></TR>
<TR>
<TD><label>Estimated total:</label></TD>
<TD> $<output id="total" name="total">80</output>.00</TD>
</TR>
<TR>
<TD><label>Promo code:</label></TD>
<TD><input type="text" id="promo" name="promo" pattern="[A-Za-z0-9]{6}"
title="Promo codes consist of 6 alphanumeric characters."></TD></TR></TABLE>
<br />
</form>
<script>
function check(input) {
if (input.value != document.getElementById('email_addr').value) {
input.setCustomValidity('The two email addresses must match.');
} else {
// input is valid -- reset the error message
input.setCustomValidity('');
}
}
</script>
Change you oninput to total.value = (parseInt(nights.value) * parseInt(rmtp.value)) + ((parseInt(guests.value)) * 10).
Not all browsers support .valueAsNumber. Check the browser support table about halfway down the page here: http://html5doctor.com/the-output-element/. The page in general gives a few good examples of oninput and the output element.