Javascript form calculation errors - javascript

Im getting uncaught type error for estimateCost, also im having issues with how to double the price with spouse. I'm suppose to have an alert window that displays the estimate cost based on selections made from city, number of days, and other options. TY!
<html>
<head>
<script language="JavaScript">
var city_prices = new Array();
city_prices["New York City"] = 0;
city_prices["Boston"] = 0;
city_prices["San Francisco"] = 200;
city_prices["Los Angeles"] = 200;
// getCityPrice() finds the price based on the city .
// Here, we need to take user's the selection from radio button selection
function getCityPrice() {
var cityPrice = 0;
//Get a reference to the form id="cakeform"
var theForm = document.forms["form1"];
//Get a reference to the cake the user Chooses name=radCity":
var selectedCity = theForm.elements["radCity"];
//Here since there are 4 radio buttons selectedCity.length = 4
//We loop through each radio buttons
for (var i = 0; i < selectedCity.length; i++) {
//if the radio button is checked
if (selectedCity[i].checked) {
//we set cityPrice to the value of the selected radio button
//i.e. if the user choose NYC we set to 0
//by using the city_prices array
//We get the selected Items value
//For example city_prices["New York City".value]"
cityPrice = city_prices[selectedCity[i].value];
//If we get a match then we break out of this loop
//No reason to continue if we get a match
break;
}
}
//We return the cityPrice
return cityPrice;
}
var number_days = new Array();
number_days["3"] = 450;
number_days["4"] = 600;
number_days["5"] = 750;
number_days["6"] = 900;
number_days["7"] = 1050;
number_days["8"] = 1350;
number_days["9"] = 1500;
number_days["10"] = 1650;
number_days["11"] = 1800;
number_days["12"] = 1950;
number_days["13"] = 2100;
number_days["14"] = 2250;
number_days["15"] = 2400;
//This function finds the day price based on the
//drop down selection
function getDayPrice() {
var dayPrice = 0;
//Get a reference to the form id="form1"
var theForm = document.forms["form1"];
//Get a reference to the select id="selNumberDays"
var selectedDays = theForm.elements["selNumberDays"];
//set dayPrice equal to value user chose
//For example number_days["3".value] would be equal to 450
dayPrice = number_days[selectedDays.value];
//finally we return dayPrice
return dayPrice;
}
//chksFirst() finds the candles price based on a check box selection
function chksFirst() {
var chkFirst = 0;
//Get a reference to the form id="form1"
var theForm = document.forms["form1"];
//Get a reference to the checkbox id="chkFirst"
var includeFirst = theForm.elements["chkFirst"];
//If they checked the box set first class to 500
if (includeFirst.checked == true) {
chkFirst = 500;
}
//finally we return the firstClass
return chkFirst;
}
//chksSpouse() finds the candles price based on a check box selection
function chksSpouse() {
var chkSpouse = 0;
//Get a reference to the form id="form1"
var theForm = document.forms["form1"];
//Get a reference to the checkbox id="chkSpouse"
var includeSpouse = theForm.elements["chkSpouse"];
//If they checked the box set Total 2x
if (includeSpouse.checked == true) {
totalPrice = totalPrice * 2;
}
//finally we return the firstClass
return totalPrice;
}
function estimateCost() {
//Here we get the estimate price by calling our function
//Each function returns a number so by calling them we add the values they return together
var totalPrice = getCityPrice() + getDayPrice() +
chksFirst() + chksSpouse();
alert(totalPrice);
}
</script>
</head>
<body>
<table align="left" width="600px" border="0" cellpadding="5px">
<tr>
<td>
<form name="form1" id="form1">
<table border="0">
<tr>
<td width="300px"><strong>Last Name: </strong>
</td>
<td width="300px">
<input type="text" name="txtFirstName" value=" " size="20" />
</td>
</tr>
<tr>
<td><strong>First Name: </strong>
</td>
<td>
<input type="text" name="txtLastName" value=" " size="20" />
</td>
</tr>
<tr>
<td><strong>Nationality: </strong>
</td>
<td>
<select name="selNationality">
<option value="amer">USA</option>
<option value="can">Canada</option>
<option value="mex">Mexico</option>
<option value="ger">Germany</option>
<option value="fra">France</option>
</select>
</td>
</tr>
<tr>
<td><strong>City you wish to visit: </strong>
</td>
<td>
<input type="radio" name="radCity" value="New York City" />New York City
<br />
<input type="radio" name="radCity" value="Boston" />Boston
<br />
<input type="radio" name="radCity" value="San Francisco" />San Francisco ($200 surcharge)
<br />
<input type="radio" name="radCity" value="Los Angeles" />Los Angeles ($200 surcharge)
<br/>
</td>
</tr>
<tr>
<td><strong>Number of days ($150 per day): </strong>
</td>
<td>
<select name="selNumberDays" id="selNumberDays">
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
</td>
</tr>
<tr>
<td><strong>Other options: </strong>
</td>
<td>
<input type="checkbox" name="chkFirst" id="chkFirst" />First Class Only ($500 surcharge)
<br />
<input type="checkbox" name="chkSpouse" id="chkSpouse" />Traveling with Spouse (All costs doubled)
<br />
</td>
</tr>
<tr>
<td align="right">
<input type="button" value="Give me an estimate!" onClick="estimateCost()" id="estimateCost" />
</td>
<td align="left">
<input type="reset" />
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</body>
</html>

On the button input with the onClick="estimateCost()" code, remove the id="estimateCost". It's causing the error for some reason. You should really be using an onClick listener though instead of an inline onclick:
Inline onclick JavaScript variable
For the total with spouse, you might want to rework it to something like this where you pass the pre-spouse price into the chksSpouse function and use it's return as the total price.
//chksSpouse() finds the candles price based on a check box selection
function chksSpouse(totalPrice) {
var chkSpouse = 0;
//Get a reference to the form id="form1"
var theForm = document.forms["form1"];
//Get a reference to the checkbox id="chkSpouse"
var includeSpouse = theForm.elements["chkSpouse"];
//If they checked the box set Total 2x
if (includeSpouse.checked == true) {
totalPrice = totalPrice * 2;
}
//finally we return the firstClass
return totalPrice;
}
function estimateCost() {
//Here we get the estimate price by calling our function
//Each function returns a number so by calling them we add the values they return together
var preSpouseTotal = getCityPrice() + getDayPrice() + chksFirst();
var totalPrice = chksSpouse(preSpouseTotal);
alert(totalPrice);
}

Related

Javascript linking options to else if

I'm a little confused about why my code doesn't work. I'm very new and am extremely interested to know where I went wrong!
I want to times whichever option I choose by var z but can't get it to work.
This is my code so far:
<td><select>
<option id="VAS" value="70">VAS</option>
<option id="VTS" value="80">VTS</option>
<option id="VAF" value="60">VAF</option>
<option id="VGS" value="40">VGS</option>
</select></td>
<td>
<input type="number" id="number" name="number">
</td>
<td>
<button onclick="myFunction()"> Total Value</button>
<br/>
<br/>
<p id="value"></p>
<script>
function myFunction() {
var y = document.getElementById("VAS").value;
var z = document.getElementById("number").value;
var a = document.getElementById("VGS").value;
var c = document.getElementById("VAF").value;
var d = document.getElementById("VTS").value;
if (value == VGS) {
var x = a * z;
document.getElementById("value").innerHTML = x;
}
else if (value == VAS) {
var x = y * z;
document.getElementById("value").innerHTML = x;
}
}
</script>
You need to compare the value of the select, not the values of the options. Here's how I fixed your JavaScript code:
function myFunction() {
var a = parseInt(document.getElementById("VAS").parentNode.value);
var z = parseInt(document.getElementById("number").value);
var x = a * z;
document.getElementById("value").innerHTML = x;
}
Fully working demo:
function myFunction() {
var a = parseInt(document.getElementById("VAS").parentNode.value);
var z = parseInt(document.getElementById("number").value);
var x = a * z;
document.getElementById("value").innerHTML = x;
}
<td>
<select>
<option id="VAS" value="70">VAS</option>
<option id="VTS" value="80">VTS</option>
<option id="VAF" value="60">VAF</option>
<option id="VGS" value="40">VGS</option>
</select>
</td>
<td>
<input type="number" id="number" name="number">
</td>
<td>
<button onclick="myFunction()"> Total Value</button>
<br/>
<br/>
<p id="value"></p>
EDIT:
To do this automatically, use oninput in the number field like so:
<input type="number" id="number" name="number" oninput="myFunction()" />
Demo:
function myFunction() {
var a = parseInt(document.getElementById("VAS").parentNode.value);
var z = parseInt(document.getElementById("number").value);
var x = a * z;
document.getElementById("value").innerHTML = x;
}
<td>
<select>
<option id="VAS" value="70">VAS</option>
<option id="VTS" value="80">VTS</option>
<option id="VAF" value="60">VAF</option>
<option id="VGS" value="40">VGS</option>
</select>
</td>
<td>
<input type="number" id="number" name="number" oninput="myFunction()">
</td>
<td>
<br/>
<br/>
<p id="value"></p>
Your values are numbers, so value will never contain VAS. Furthermore, strings need to be surrounded by quotes, so your if-statement will look like this:
if(a == "VAS")
But the value contains numbers, so it should actually be:
if(a == "40")
Note: the values are all strings unless you cast them.

Save input data to table on same page? HTML and Javascript

I am brand new to JavaScript and HTML, and am trying to make a rehersal booking app which collects the info needed and displays it in a table on the same page.
I have been trying for hours on end to get it to work with various methods and I feel like it's just getting worse. I have probably made some silly mistakes but I cant seem to work out what I need to change to make it work.
Here is my HTML:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>White Noise Studios - Home</title>
<script type="text/javascript" src="Homepage.js"></script>
<style>
body, html
{
height: 100%;
background: url(Media/background.png);
background-size: cover;
}
</style>
</head>
<body>
<header style="color:white;font-family:'Calibri'">
<h1> Rehearsal Bookings</h1>
<p>Please let us know what gear you require in order for us to have the room ready for you. Leave the equipment section blank if you wish to bring your own gear. </p>
</header>
<form name="booking" id="booking">
<table style="color:white;font-family:'Yu Gothic UI Semibold'">
<tr>
<td><form action="Homepage.html"><input type="image" src="Media/homebutton.png"></form></td>
<td><form action="Homepage.html"><input type="submit" value="Book My Rehearsal"></form></td>
<td>Artist Name:</td><td><input type="text" name="Artist" size="50" id="Artist" /></td>
<td>Contact Number:</td><td><input type="text" name="Contact" size="50" id="Contact" /></td>
</tr>
<td>Equipment Needed:</td>
<td><label>Microphone</label>
<select id = "Microphone" name="Microphone">
<option value = "0">0</option>
<option value = "1">1</option>
<option value = "2">2</option>
<option value = "3">3</option>
</select></td>
<td><label>Guitars</label>
<select id = "Guitar" name="Guitar">
<option value = "0">0</option>
<option value = "1">1</option>
<option value = "2">2</option>
<option value = "3">3</option>
</select></td>
<td><label>Bass</label>
<select id = "Bass" name="Bass">
<option value = "0">0</option>
<option value = "1">1</option>
<option value = "2">2</option>
</select></td>
<td><label>Drums</label>
<select id = "Drums" name="Drums">
<option value = "0">None</option>
<option value = "1">Mapex Mars 5 Piece Full Kit</option>
<option value = "2">Ludwig LC17611 5 Piece Acoustic Kit</option>
<option value = "3">Roland TD 25KV V-Drums Kit</option>
</select></td>
<td><label>Amp</label>
<select id = "Amp" name="Amp">
<option value = "0">None</option>
<option value = "1">Marshall DSL100H</option>
<option value = "2">Marshall MG100GFX</option>
<option value = "3">Mesa Boogie triple Rectifier 100w</option>
</select></td> </tr>
<tr>
<td>Date:</td><td><input type="date" name="Date" id="Date" /></td>
</tr>
<tr>
<td>Time:</td><td><input type="time" name="Time" id="Time" /></td>
</tr>
</table>
</form>
<input type="submit" name="Book" value="Book my Rehearsal">
<button id="cancel" name="Cancel" onclick="myFunction()" value="Reset form">Cancel</button>
<hr/>
<div id="table">
</div>
<body>
<body style=”font-family:”arial black”; >
And my JavaScript:
var ArtistField, ContactField, MicrophoneSelect, GuitarSelect, BassSelect, DrumsSelect, AmpSelect, DateSelect, TimeSelect, BookSelect, CancelSelect;
var Booking = function (Artist, Contact, Microphone, Guitar, Bass, Drums, Amp, Date, Time ) {
this.Artist = Artist;
this.Contact = Contact;
this.Microphone = Microphone;
this.Guitar = Guitar;
this.Bass = Bass;
this.Drums = Drums;
this.Amp = Amp;
this.Date = new Date ;
this.Time = Time;
};
function myFunction() {
document.getElementById("booking").reset();
}
var Bookings = []
Booking.prototype.tableRow = function(){
var tr = "<tr><td>" + this.Artist + "</td><td>" +
this.Contact + "</td><td>" + this.Microphone +
"<tr><td>" + this.Guitar + "<tr><td>" + this.Bass + "<tr><td>" + this.Drums + "<tr><td>" + this.Amp +"<tr><td>"
+ this.getDate() + "</td><td>" + this.Time+ "</td><td>" + "</td></tr> ";
return tr;
};
Booking.prototype.getDate = function(){
return this.Date.toDateString();
};
var clickBook = function() {
addbooking(ArtistField, ContactField, MicrophoneSelect, GuitarSelect, BassSelect, DrumsSelect, AmpSelect, DateSelect, TimeSelect,);
showTable();
};
var showTable = function(){
var tableDiv = document.getElementById("table"), table = "<table border='1'>" +
"<thead><th>Artist</th><th>Contact</th><th>Microphone</th><th>Guitar</th><th>Bass</th><th>Drums</th><th>Amp</th</thead>";
for(var i=0, j=Bookings.length; i<j; i++){
var appt = Bookings[i];
table += appt.tableRow();
}
table+="</table>";
tableDiv.innerHTML = table;
};
window.onload = function(){
ArtistField = document.getElementById("Artist");
ContactField = document.getElementById("Contact");
MicrophoneSelect = document.getElementById("Microphone");
GuitarSelect = document.getElementById("Guitar");
BassSelect = document.getElementById("Bass");
DrumsSelect = document.getElementById("Drums");
AmpSelect = document.getElementById("Amp");
DateSelect = document.getElementById("Date");
TimeSelect = document.getElementById("Time");
//var roleChoice = roleField.options[roleField.selectedIndex].text;
Book = document.getElementById("Book");
Book.onclick = clickBook();
showTable();
};

The result after adding 2 function is undefined

I am trying to add two functions calculate1() and calculate2(). Both functions are taking values from function populate(). Is the code wrong? Once I enter an amount on both functions, the result is total amount undefined.
<form>
Car:
<select id="slct1" name="slct1" onchange="populate('slct1','slct2')">
<option value=""></option>
<option value="Fiat">Fiat</option>
<option value="Dodge">Dodge</option>
<option value="Ford">Ford</option>
</select>
Type of Car:
<select id="slct2" name="slct2">
</select>
<label> Amount <input style="width:10%" type="number" name="amount1" id="amount1" onkeyup="result()"/> (g) </label>
<label> Total <input style="width:10%" type="number" name="answer1" id="answer1"/></label>
<input type="reset" name="Reset" value="Reset" onclick="rstFunction()"/>
<br><br><br>
<hr>
<br>
</form>
<!--Starts 2 selection-->
<form>
Food:
<select id="slct1a" name="slct1a" onchange="populate('slct1a','slct2a')">
<option value=""></option>
<option value="Fiat">Fiat</option>
<option value="Dodge">Dodge</option>
<option value="Ford">Ford</option>
</select>
Type of Food:
<select id="slct2a" name="slct2a">
</select>
<label> Amount <input style="width:10%" type="number" name="amount2" id="amount2" onkeyup="result()"/> (g) </label>
<label> Total <input style="width:10%" type="number" name="answer2" id="answer2"/></label>
<input type="reset" name="Reset" value="Reset" onclick="rstFunction()"/>
<br><br><br>
<hr>
<br>
<p id="ansCAL"></p>
</form>
<input type="reset" onclick="resetFunctions()" value="Reset">
</script>
var t = total1 + total2;
function result() {
document.getElementById('ansCAL').value = calculate1() + calculate2();
}
function populate(select1, select2)
{
var Brand1 = document.getElementById(select1);
var Brand2 = document.getElementById(select2);
Brand2.innerHTML = "";
if(Brand1.value == "Fiat")
{
var optionArray = ["|","4000|Uno","5000|Ritmo","6000|Panda"];
}
else if(Brand1.value == "Dodge")
{
var optionArray = ["|","4000|Avanger","5000|Challengere","6000|Charger"];
}
else if(Brand1.value == "Ford")
{
var optionArray = ["|","7000|Mustang","8000|Shelby","focus|Focus"];
}
for(var option in optionArray)//the options within the optionArray
{
var pair = optionArray[option].split("|");//in tha variable pair is stored both value and label
var newOption = document.createElement("option");// option in the bracket is used to create new options or you can insert divs paragraph etc
newOption.value = pair[0];//pair 0 gives the value
newOption.innerHTML = pair[1];//pair 1 gives the label
Brand2.options.add(newOption);
}
}
function calculate1() {
Brand1 = document.getElementById('slct1').value;
Brand2 = document.getElementById('slct2').value;
multi=document.getElementById('amount1').value;
total1=parseInt((Brand2)*multi/100);
document.getElementById('answer1').value=total1;
document.getElementById("ansCAL").innerHTML = "<br>Total amount " + t;
}
function calculate2() {
Brand1 = document.getElementById('slct1a').value;
Brand2 = document.getElementById('slct2a').value;
multi=document.getElementById('amount2').value;/*to change accordingly amount1*/
total2=parseInt(((Brand2)*multi)/100);
document.getElementById('answer2').value=total2;/*to change accordingly amount1*/
document.getElementById("ansCAL").innerHTML = "<br>Total amount " + t;
}
function resetFunctions() {
//using the array forEach method on the form
Array.prototype.forEach.call(document.forms,function(el,idx,array){
//the method parameters are element, index and the array
// we loop through all the forms and invoking reset()
el.reset();
});
result();
}
function rstFunction()
{
document.getElementById("ansCAL").innerHTML = "<br>Total amount" + result().value;
}
</script>
The answer was to increase the total in every calculate function. Example (total + total1). Removed the variable t and declared the totals in the printout section.

Javascript not working to validate or give total on a sample order form

Ok I created a javascript for a simple HTML form to validate as well as give you a popup of the total or if anything is wrong with one of the inputs.
heres the javascript
function processOrderform() {
var OrderFormObj = document.getElementById("OrderForm");
if (validateInput(OrderFormObj)) {
var total = calculateTotal(OrderFormObj);
alert("Your Total Is: $" + total + ". Thank you for your order! We hope to see you again!");
}
}
function validateInput(OrderFormObj) {
var product1_prices = OrderFormObj.product1.options[OrderFormObj.product1.selectedIndex].value;
var product2_prices = OrderFormObj.product2.options[OrderFormObj.product2.selectedIndex].value;
var product3_prices = OrderFormObj.product3.options[OrderFormObj.product3.selectedIndex].value;
var product4_prices = OrderFormObj.product4.options[OrderFormObj.product4.selectedIndex].value;
var quantity1 = OrderFormObj.quantity1.value;
var quantity2 = OrderFormObj.quantity2.value;
var quantity3 = OrderFormObj.quantity3.value;
var quantity4 = OrderFormObj.quantity4.value;
var taxexempt = OrderFormObj.taxexempt.value;
var quantity1OK, quantity2OK, quantity3OK, quantity4OK, taxexemptOK;
quantity1OK = validateQuantity1(quantity1);
quantity2OK = validateQuantity2(quantity2);
quantity3OK = validateQuantity3(quantity3);
quantity4OK = validateQuantity4(quantity4);
taxexemptOK = validateTaxExempt;
if (OrderFormObj.tax.checked) {
taxexemptOK = validateTaxExempt(taxexempt);
}
return quantity1OK && quantity2OK && emailOK && taxexemptOK;
}
function validateQuantity1(quantity1) {
if (isNaN(quantity1)) {
alert("Error: Please input a number for processor quantity.")
return false;
}
if (quantity1 < 0 || quantity1 > 50) {
alert("Error: The maximum quantity of processors you can order is 50. Please select a smaller amount or contact us for more information.")
return false;
}
return true;
}
function validateQuantity2(quantity2) {
if (isNaN(quantity2)) {
alert("Error: Please input a number for storage drive quantity.")
return false;
}
if (quantity2 < 0 || quantity2 > 50) {
alert("Error: The maximum quantity of storage drives you can order is 50. Please select a smaller amount or contact us for more information.")
return false;
}
return true;
}
function validateQuantity3(quantity3) {
if (isNaN(quantity3)) {
alert("Error: Please input a number for memory quantity.")
return false;
}
if (quantity3 < 0 || quantity3 > 50) {
alert("Error: The maximum quantity of memory you can order is 50. Please select a smaller amount or contact us for more information.")
return false;
}
return true;
}
function validateQuantity4(quantity4) {
if (isNaN(quantity4)) {
alert("Error: Please input a number for graphics card quantity.")
return false;
}
if (quantity4 < 0 || quantity4 > 50) {
alert("Error: The maximum quantity of graphics cards you can order is 50. Please select a smaller amount or contact us for more information.")
return false;
}
return true;
}
function validateTaxExempt(taxexempt) {
var p = taxexempt.search(/^\d{8}$/);
if (p == 0)
return true;
else {
alert("Error: Invalid tax-exempt code. Please enter an 8-digit code.");
return false;
}
}
function calculateTotal(OrderFormObj) {
var product1_prices = OrderFormObj.product1.options[OrderFormObj.product1.selectedIndex].value;
alert("Processor Price is $" + product1_prices);
var quantity1 = OrderFormObj.quantity1.value;
alert("Your processor quantity is " + quantity1);
var product2_prices = OrderFormObj.product2.options[OrderFormObj.product2.selectedIndex].value;
alert("Storage Drive Price is $" + product2_prices);
var quantity2 = OrderFormObj.quantity2.value;
alert("Your storage drive quantity is " + quantity2);
var product3_prices = OrderFormObj.product3.options[OrderFormObj.product3.selectedIndex].value;
alert("Memory price is $" + product3_prices);
var quantity3 = OrderFormObj.quantity3.value;
alert("Your memory quantity is " + quantity3);
var product4_prices = OrderFormObj.product4.options[OrderFormObj.product4.selectedIndex].value;
alert("Graphics Card price is $" + product4_prices);
var quantity4 = OrderFormObj.quantity4.value;
alert("Your graphics card quantity is " + quantity4);
var taxexempt = OrderFormObj.taxexempt.value;
alert("Your tax exempt code is " + taxexempt);
var quantity1OK, quantity2OK, quantity3OK, quantity4OK, taxexemptOK;
var checkboxs = OrderFormObj.service;
for (var i = 0; i < checkbox.length; i++) {
if (checkboxs[i].checked) {
var services_prices = checkbox[i].value;
break;
}
}
var getProduct1Price = parseFloat(product1_prices) * parseFloat(quantity1);
var getProduct2Price = parseFloat(product2_prices) * parseFloat(quantity2);
var getProduct3Price = parseFloat(product3_prices) * parseFloat(quantity3);
var getProduct4Price = parseFloat(product4_prices) * parseFloat(quantity4);
var service_price = parseFloat(document.getElementById('service').value);
var total = getProduct1Price + getProduct2Price + getProduct3Price + getProduct4Price + service_price;
return total;
}
and heres the html for it
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- bmi5.html -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="orderscript.js">
</script>
<title>Products & Services</title>
</head>
<body>
<h1>PC Products</h1>
<form id="OrderForm" method="post" action=""
onsubmit="processOrderform()">
<tr>
<td><label for="product1">Processors:</label></td>
<td><select id="product1" name="product1">
<option>Select Device</option>
<option value="139.99">Intel i3 - $140</option>
<option value="189.99">Intel i5 - $190</option>
<option value="239.99">Intel i7 - $240</option>
</select></td>
<td><label for="quantity1">Quantity :</label></td>
<td><input id="quantity1" type="text" name="quantity1" size ="1" /></td>
</tr><br />
<tr>
<td><label for="product2">Storage:</label></td>
<td><select id="product2" name="product2"></td>
<td><option>Select Device</option>
<option value="149.99">SSD 128GB - $149.99</option>
<option value="249.99">SSD 256GB - $249.99</option>
<option value="519.00">SSD 512GB - $519.00</option>
<option value="69.99">HDD 500GB - $69.99</option>
<option value="109.99">HDD 1TB - $109.99</option>
<option value="149.99">HDD 1.5TB - $149.99</option>
<option value="199.99">HDD 3TB - $199.99</option>
</select></td>
<td><label for="quantity2">Quantity :</label></td>
<td><input id="quantity2" type="text" name="quantity2" size ="1"></td>
</tr><br />
<tr>
<td><label for="product3">Memory:</label></td>
<td><select id="product3" name="product3"></td>
<td><option>Select Device</option>
<option value="59.99">DDR3 8GB - $59.99</option>
<option value="109.99">DDR3 16GB - $109.99</option>
<option value="209.99">DDR3 32GB - $209.99</option>
</select></td>
<td><label for="quantity3">Quantity :</label></td>
<td><input id="quantity3" type="text" name="quantity3" size ="1"></td>
</tr><br />
<tr>
<td><label for="product4">Graphics Card:</label></td>
<td><select id="product4" name="product4"></td>
<td><option>Select Device</option>
<option value="139.99">Nvidia - $649.99</option>
<option value="189.99">AMD - $449.99</option>
</select></td>
<td><label for="quantity4">Quantity :</label></td>
<td><input id="quantity4" type="text" name="quantity4" size ="1"></td>
</tr><br />
<br />
<table> Service and Repair
<tr><td><input id="virus" type="checkbox" name="service" value="99.99"></td>
<td>Virus Removal</td> <td align="right"><tt>99.99</tt></td></tr>
<tr><td><input id="lesson" type="checkbox" name="service" value="29.99"></td>
<td>1 Hour Computer Lessons</td> <td align="right"><tt>29.99</tt></td></tr>
<tr><td><input id="assembly" type="checkbox" name="service" value=49.99"></td>
<td>PC Assembly</td> <td align="right"><tt>49.99</tt></td></tr>
</table>
<br />
<h4><i>*Sales Tax of 8.25% applies</i></h4>
<td>Tax exempt check box:
<input type="checkbox" name="reply" value="yes" /><br /></td>
<p>
<input type="hidden" id="itemname" name = "itemname" value= "">
<td><input type="submit" value="Submit your order" /></td>
<td><input type="reset" value="Reset form" /></td>
</p>
</form>
</body>
</html>
any input would be great.
If you are accessing some form element with its 'id' then it is not required to use form id also with them. You can simply access the form elements like this:
var product1 = document.getElementById('product1').value;
If you want to access the form elements with their names then you have to use form name too. Assuming your form name is 'OrderForm', It will be like this:
document.forms['OrderForm']['product1'].value;
These things you have to correct in your javascript part. Secondly, you have used some codes like:
var quantity1 = OrderFormObj.quantity1.value;
This also needs to be corrected. If you want quantity1 field value, you can simply get it like this:
var quantity1 = document.getElementById('quantity1').value;

one radio button will be selected at a time

I have a jsp page which shows the radio button content(on clicking it,select box will appear ) of a table.But here I'm unable select one radio button(with select box) at a time.I'm showing you the code.
<table>
<tr>
<td><input type="radio" onclick="document.getElementById('select1000').style.display=(this.checked)?'inline':'none';" name="license" value="1000"> 1-1000</td>
<td>
<div id="select1000" style="display: none">
<select id="">
<option test="l25" value="25">25</option>
<option test="l100" value="100">100</option>
</select>
</div>
</td>
</tr>
<tr>
<td><input type="radio" onclick="document.getElementById('select3000').style.display=(this.checked)?'inline':'none';" name="license" value=""> 1001-3000</td>
<td>
<div id="select3000" style="display: none">
<select id="">
<option test="l1001" value="1001">1001</option>
<option test="l1075" value="1075">1075</option>
</select>
</div>
</td>
</tr>
<tr>
<td><input type="radio" onclick="document.getElementById('select5000').style.display=(this.checked)?'inline':'none';" name="license" value=""> 3001-5000</td>
<td>
<div id="select5000" style="display: none">
<select id="">
<option test="l3001" value="3001">3001</option>
<option test="l3075" value="3075">3075</option>
</select>
</div>
</td>
</tr>
</table>
Where I am going wrong ..... any valuable input will be appreciated.
Could you try to change the input element's name:
<td><input type="radio" onclick="change(this, 'select1000')" name="license[1]" value="1000"> 1-1000</td>
and create a function:
function change(t, div){
var ele = document.getElementsByTagName("div");
var radios = document.getElementsByName("license[1]");
for (var i = 0, radio; radio = radios[i]; i++) {
if (!radio.checked) {
if(ele[i].id != div){
ele[i].style.display = 'none';
}
}else{
document.getElementById(div).style.display='inline';
}
}
}
I'm not sure if this is what you want, but HERE you can see an example.
You just need to change your parenthesis:
document.getElementById('select5000').style.display = (this.checked ? 'inline':'none');
Here is your inputs
<input type="radio" onchange="hideElem(this,'select1000')" name="license" value="1000">
<input type="radio" onchange="hideElem(this,'select3000')" name="license" value="">
<input type="radio" onchange="hideElem(this,'select5000')" name="license" value="">
and the function:
<script type="text/javascript">
function hideElem(self,divId){
var divs = ['select1000','select3000','select5000'];
if(self.checked){
for(var i=0; i < divs.length; i++){
if (divs[i] === divId){
document.getElementById(divs[i]).style.display = 'inline';
} else{
document.getElementById(divs[i]).style.display = 'none';
}
}
}
}
</script>
DEMO
because when you click an input(radio), this is the current radio and you don't know the previous one, you need to record the previous select, use jQuery, code like:
(function () {
var oldSel = null;
$('input:radio').click(function () {
// get the current select
var sel = $('#select' + this.value);
// show current select
sel.show();
// if old select is exist, hide it
oldSel && oldSel.hide();
// store the current select when radio on click
oldSel = sel;
})​;
})();​
see the demo

Categories