...

View Full Version : writing a price based on selection of input fields



Chrys
08-29-2011, 06:34 PM
I have a registration form that I am working on in which I need to assign a price to each option in a selection box then write that price in the document.
Then I have a radio button that will add (different amounts based on selection) to that price before it is written. Then I have another radio button that just needs to write a price based on its selection. Both of these values will be written and then totaled. (See below for a less confusing explanation)

On HTML form:
>drop down list (name courseName, value of selections 1,2,3,4)
> radio button (name returnStudent, value of selections 1,2)
> radio button (name bookNeeded, value of selections 1,2)


Table (name totalprice) at the bottom of the form:
price1: price of courseName plus returnStudent (td with name tuitionprice)
price2: price of bookNeeded (td with name bookprice)
Total of the above (td with name totalprice)

This is what I am trying to make work...


var selectedCourse = document.onsiteRegistration.courseName.value;
var selectedStudent = document.onsiteRegistration.returnStudent.value;
function setTuition()
{
if (selectedCourse == "1" && selectedStudent =="1")
{
document.write("12345");
}

if (selectedCourse == "1" && selectedStudent =="2")
{
document.write("54321");
}
}


Then in my HTML I have simply put this to call the function and write it where I need it to be placed. <script>setTuition()</script>

I am trying to find some examples of something like this but all I am coming up with is shopping carts and that is not what I need here. I am fairly confident that I can program the second part (totaling) if I can only get the selections to populate the different prices for me. If someone could point me in the right direction I would be very grateful!

Old Pedant
08-29-2011, 08:11 PM
You can *NOT* use document.write any time after a page is loaded.

If you do so, you *WIPE OUT* the entire contents of the page, including even the JavaScript that did the document.write!

SO you can *NOT* use that function after the user makes a selection of any kind on the <form>.

You *MUST* instead use DOM manipulation.

So, for example, in place of

document.write("12345");

you might do


document.getElementById("result").innerHTML = "12345";

assuming that someplace on the page you have something like

<span id="result">result goes here</span>

Old Pedant
08-29-2011, 08:15 PM
Also, you can't use
var selectedStudent = document.onsiteRegistration.returnStudent.value; if returnStudent is a set of radio buttons. The ".value" property only works for text boxes, <textarea>s, and <select>s.

For radio buttons, I recommend code like this:


function getRBValue( rbGroup )
{
if ( rbGroup.length == null ) return rbGroup.checked ? rbGroup.value : null;
for ( var r = 0; r < rbGroup.length; ++r )
{
if ( rbGroup[r].checked ) return rbGroup[r].value;
}
return null;
}
...
... and then invoke it as ...
...
var selectedStudent = getRBValue( document.onsiteRegistration.returnStudent );

Chrys
08-29-2011, 09:37 PM
Then to call that function I can put it in the select tag like this?


<select name="courseName" onchange="setTuition();">

<td class="price"><span id="tuitionprice"></span></td>

var selectedCourse = document.onsiteRegistration.courseName.value;
function setTuition(selectedCourse)
{
if (selectedCourse == "1")
{
document.getElementById("tuitionprice").innerHTML = "12345";
}
}

Old Pedant
08-30-2011, 01:38 AM
Yes, but your JS code is wrong (and out of place and missing script tag). And can be made simpler.



<html>
<head>
<script type="text/javascript">
function setTuition(select)
{
if (select.value == "1")
{
document.getElementById("tuitionprice").innerHTML = "12345";
}
}
</script>
</head>
<body>
<form name="onsiteRegistration">
<select name="courseName" onchange="setTuition(this);">
<option value="0">-- choose one --</option>
<option value="1">Underwater Basketweaving</option>
<option value="2">Raising Gila Monsters for Fun and Profit</option>
...
</select>
...
<tr>
<td class="price" id="tuitionprice"></td>
...

You don't need the <span> if the value will be all that is put inside the <td>. You can put the id directly on the <td>.

By passing this from the onchange, you don't have to use document.onsiteRegistration.courseName in the function.

Old Pedant
08-30-2011, 01:43 AM
But here's a sneaky idea for you:


<html>
<head>
<script type="text/javascript">
function setTuition(select)
{
var temp = select.value.split("$"); // splits the value into two parts
var courseNum = temp[0]; // part before the $
var price = temp[1]; // part after the $
document.getElementById("courseNumber").innerHTML =
"Course number " + courseNum;
document.getElementById("tuitionprice").innerHTML =
"Cost: $" + price.toFixed(2);
}
</script>
</head>
<body>
<form name="onsiteRegistration">
<select name="courseName" onchange="setTuition(this);">
<option value="$">-- choose one --</option>
<option value="101$395">Underwater Basketweaving</option>
<option value="203B$475">Raising Gila Monsters for Fun and Profit</option>
...
</select>
...
<tr>
<td id="courseNumber"></td>
<td class="price" id="tuitionprice"></td>
...

See? You can put all sorts of hidden information in the value= of an <option> (or radio button, or checkbox) like that. If you had 4 pieces of information and separated each by your chosen delimiter (I used $, but anything not in the content is fine) and the split method will give you an array of that many pieces.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum