Web Analytics Made Easy - StatCounter writing a price based on selection of input fields - CodingForum

Announcement

Collapse
No announcement yet.

writing a price based on selection of input fields

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    writing a price based on selection of input fields

    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...
    Code:
    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!
    Last edited by Chrys; Aug 29, 2011, 02:07 PM.
    Tags: None
  • #2
    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
    Code:
        document.write("12345");
    you might do
    Code:
        document.getElementById("result").innerHTML = "12345";
    assuming that someplace on the page you have something like
    Code:
       <span id="result">result goes here</span>
    Be yourself. No one else is as qualified.

    Comment

    • #3
      Also, you can't use
      Code:
      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:
      Code:
      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 );
      Be yourself. No one else is as qualified.

      Comment

      • #4
        Then to call that function I can put it in the select tag like this?
        Code:
        <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";
	}
}

        Comment

        • #5
          Yes, but your JS code is wrong (and out of place and missing script tag). And can be made simpler.

          Code:
          <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([B][COLOR="Red"]this[/COLOR][/B]);">
    <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.
          Be yourself. No one else is as qualified.

          Comment

          • #6
            But here's a sneaky idea for you:
            Code:
            <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.
            Be yourself. No one else is as qualified.

            Comment

            Previous template Next
            Working...
            X
            😀
            🥰
            🤢
            😎
            😡
            👍
            👎