Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    44
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Cool 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; 08-29-2011 at 07:07 PM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,166
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    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>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,166
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    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 );
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    New Coder
    Join Date
    Aug 2011
    Posts
    44
    Thanks
    12
    Thanked 0 Times in 0 Posts
    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";
    	}
    }

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,166
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    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(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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,166
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •