PDA

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.