Currently working on a project but getting an error that the code used is not a function which is inside a <form></form>
Our project is a simple registration with auto compute function where in when I input the value on the attendee count, it would automatically show the value below the registration, it also has a view function for us to view the form first before we hit the submit button
<html>
<head>
<title>Registration Form</title>
<meta name="viewport" content="width=device-width">
<link href="C:UsersAdminDesktopRegistration1galvanRegistration111.css" rel="stylesheet" type="text/css">
</head>
<script language="javascript">
function viewInput()
{
document.getElementById("KEG1").innerHTML = document.getElementById("KFname").value;
document.getElementById("KEG2").innerHTML = document.getElementById("KLname").value;
document.getElementById("KEG3").innerHTML = document.getElementById("KEmail").value;
document.getElementById("KEG4").innerHTML = document.getElementById("KArea").value;
document.getElementById("KEG5").innerHTML = document.getElementById("KPtn").value;
document.getElementById("KEG6").innerHTML = document.getElementById("KAddress").value;
document.getElementById("KEG7").innerHTML = document.getElementById("KCity").value;
document.getElementById("KEG8").innerHTML = document.getElementById("KState").value;
document.getElementById("KEG9").innerHTML = document.getElementById("KZip").value;
document.getElementById("KEG10").innerHTML = document.getElementById("KCountry").value;
document.getElementById("KEG11").innerHTML = document.getElementById("KCompany").value;
}
var numOne, numTwo, res, temp;
function compute()
{
numOne = parseInt(document.getElementById("value1").value);
numTwo = parseInt(document.getElementById("KAttendee").value);
if(numOne && numTwo)
{
temp = document.getElementById("res");
temp.style.display = "block";
res = numOne * numTwo;
document.getElementById("compute").value = "$" + res;
}
}
function checkforblank() {
if (document.getElementById('KFname').value == "") {
alert('Please enter your FIRST NAME');
return false;
}
if (document.getElementById('KLname').value == "") {
alert('Please enter your LAST NAME');
return false;
}
if (document.getElementById('KEmail').value == "") {
alert('Please enter your EMAIL ADDRESS');
return false;
}
if (document.getElementById('KArea').value == "") {
alert('Please enter the AREA CODE');
return false;
}
if (document.getElementById('KPtn').value == "") {
alert('Please enter your PHONE NUMBER');
return false;
}
if (document.getElementById('KAddress').value == "") {
alert('Please enter your ADDRESS');
return false;
}
if (document.getElementById('KCity').value == "") {
alert('Please enter your CITY');
return false;
}
if (document.getElementById('KState').value == "") {
alert('Please enter your STATE');
return false;
}
if (document.getElementById('KZip').value == "") {
alert('Please enter the ZIP CODE');
return false;
}
if (document.getElementById('KCountry').value == "") {
alert('Please enter your COUNTRY');
return false;
}
if (document.getElementById('KCompany').value == "") {
alert('Please enter the name of the COMPANY');
return false;
}
if (document.getElementById('KAttendee').value == "") {
alert('Please enter the count of ATTENDEES');
return false;
}
}
</script>
<body style="background-color: #ccd1d1"; text-align="MIDDLE">
<h1>Registration Form</h1>
<form method="post" action="C:UsersAdminDesktopRegistration1galvanMainPage.html" >
<table Name="Full Name">
<tr>
<td><label>Full Name :</label></td>
<td><input required type="text" id="KFname"><br></td>
<td><input required type="text" id="KLname"><br></td>
</tr>
<tr>
<td><label></label></td>
<td><label class="lowerTxt">First Name</label></td>
<td><label class="lowerTxt">Last Name</label></td>
</tr>
</table>
<table Name="Email">
<tr>
<td><label>E-Mail :</label></td>
<td><input type="text" class="long" id="KEmail"><br></td>
</tr>
<tr>
<td><label></label></td>
<td><label class="lowerTxt">[email protected]</label></td>
</tr>
</table>
<table Name="Phone Number" Class="TablePhone">
<tr>
<td><label>Phone Number :</label></td>
<td><input type="number" id="KArea"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="3"><br></td>
<td><input type="number" id="KPtn"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="10"><br></td>
</tr>
<tr>
<td><label></label></td>
<td><label class="lowerTxt">Area Code</label></td>
<td><label class="lowerTxt">Phone Number</label></td>
</tr>
</table>
<table Name="TableAddress">
<tr>
<td><label>Address :</label></td>
<td><input type="text" class="long" id="KAddress"><br></td>
</tr>
<tr>
<td><label></label></td>
<td><label class="lowerTxt">Street Address</label></td>
</tr>
</table>
<table Name="TableCity">
<tr>
<td><label></label></td>
<td><input type="text" id="KCity"><br></td>
<td><input type="text" id="KState"><br></td>
</tr>
<tr>
<td><label></label></td>
<td><label class="lowerTxt">City</label></td>
<td><label class="lowerTxt">State/Province</label></td>
</tr>
</table>
<table class="TableZip">
<tr>
<td><label></label></td>
<td><input type="number" id="KZip"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="4"><br></td>
<td><input type="text" id="KCountry"><br></td>
</tr>
<tr>
<td><label></label></td>
<td><label class="lowerTxt">Postal/Zip Code</label></td>
<td><label class="lowerTxt">Country</label></td>
</tr>
</table>
<table Name="Company">
<tr>
<td><label>Company Name :</label></td>
<td><input type="text" class="long" id="KCompany"><br></td>
</tr>
</table>
<table Name="Attendee">
<tr>
<td><label>Attendee Count :</label></td>
<input id="value1" type="hidden" value="500">
<td class="dollar">$500 x <input type="number" class="value2" id="KAttendee"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="2" min='1' max='10'
onclick="compute()" onkeyup="compute()" required></td>
</tr>
<tr>
<td><label></label></td>
<td class="Max">Max 10 Attendee</td>
</tr>
<script for ="value2">
document.getElementsByClassName('value2')[0].oninput = function () {
var max = parseInt(this.max);
if (parseInt(this.value) > max) {
this.value = max;
}
}
</script>
</tr>
</table>
<br>
<div Name="Button1">
<button class="Button1" type="submit" value="VIEW" onclick="viewInput(), checkforblank(); return false">VIEW</button>
</div>
<br>
<h1>Your Information</h1>
<div name="viewform">
<p><label class="info1">FIRST NAME:</label>
<span class="info2" id='KEG1' style="text-transform: uppercase;"></span></p>
<p><label class="info1">LAST NAME:</label>
<span class="info2" id='KEG2' style="text-transform: uppercase;"></span></p>
<p><label class="info1">EMAIL:</label>
<span class="info2" id='KEG3' style="text-transform: uppercase;"></span></p>
<p><label class="info1">PHONE NUMBER:</label>
<span class="info2" id='KEG4' style="text-transform: uppercase;"></span>
<span class="info2" id='KEG5' style="text-transform: uppercase;"></span>
</p>
<p><label class="info1">ADDRESS:</label>
<span class="info2" id='KEG6' style="text-transform: uppercase;"></span>
<span class="info2" id='KEG7' style="text-transform: uppercase;"></span>
<span class="info2" id='KEG8' style="text-transform: uppercase;"></span>
<span class="info2" id='KEG9' style="text-transform: uppercase;"></span>
<span class="info2" id='KEG10' style="text-transform: uppercase;"></span>
</p>
<p><label class="info1">COMPANY NAME:</label>
<span class="info2" id='KEG11' style="text-transform: uppercase;"></span></p>
<p><label class="info1">ATTENDEE COUNT:</label>
<span class="info2" id='KEG12' style="text-transform: uppercase;"></span>
</p>
<p id="res"><label class="info1">TOTAL AMOUNT:</label>
<input class="add" id="compute">
</p>
</div>
<br>
<div Name="Button2">
<input class="Button2" type="submit" onclick="viewInput()">
</div>
</form>
</body>
</html>