Forum question with javascript 1

audiaho · Jul 27, 2006

Alright...this might be a little hard to understand, but I'll try to make it as easy as possible.

http://www.directamish.com/orderform.htm

What you will see here is just a form that has a javascript to do addition and subtraction and keeps a running total at the bottom of the page. I want to keep this part of the form, but I want to add some things to it and I'm not sure how.

At the very top of the form, I want to have, say, Package 1, Package 2, Package 3 for example, all three in radio buttons. Below that, I want to have a list of options, quite a few of them, all with check boxes, or maybe sections of radio buttons. What I would LOVE to setup, is a way for a user to select a Package at the top first. When they select that, a base price is put in the total price at the bottom, and the checkboxes are automatically selected that are included with that package. So for example, if Package 3 was $1000, and had every option, I would want them to select Package 3 at the top, $1000 go into the total, and all of the checkboxes become selected automatically since they are all included in that package. Then the customer could go down and make changes to the options that would reflect on the total price at the bottom. Anyone have any idea how I could do this? Thanks

Chris

cLFlaVA · Jul 27, 2006

hey. don't ask me what i was thinking, providing you with a complete solution and all. i'm bored at work.

Code:

<html><head>
	<SCRIPT LANGUAGE="JavaScript">
	<!-- hide javascript from non-JavaScript browsers.
        // This function calculates the total for items in the form which are selected
    function doDefaults( cb ) {
        var f = document.forms['selectionForm'];
        var intCBValue = parseInt( cb.value );
        
        with (f) {
            switch( intCBValue ) {
                case 250:
                    elements['Steak'].checked = true;
                    elements['Chicken'].checked = true;
                    elements['Sushi'].checked = false;
                    break;
                case 500:
                    elements['Steak'].checked = false;
                    elements['Chicken'].checked = true;
                    elements['Sushi'].checked = true;
                    break;
                case 1000:
                    elements['Steak'].checked = true;
                    elements['Chicken'].checked = false;
                    elements['Sushi'].checked = true;
                    break;
                default:
                    elements['Steak'].checked = false;
                    elements['Chicken'].checked = false;
                    elements['Sushi'].checked = false;
            }
        }
    }
    
    function doTotals() {
        var f = document.forms['selectionForm'];
        var intPackageAmount = getPackageAmount(f.elements['Sauce']);
        var intSteakAmount = getCheckAmount(f.elements['Steak']);
        var intChickenAmount = getCheckAmount(f.elements['Chicken']);
        var intFishAmount = getCheckAmount(f.elements['Sushi']);
     
        f.elements['total'].value = intPackageAmount + intSteakAmount + intChickenAmount + intFishAmount;
    }
    
    function getPackageAmount(s) {
        for ( var i = 0; i < s.length; i++ ) {
            if ( s[i].checked )
                return parseInt(s[i].value);
        }
        return 0;
    }
    
    function getCheckAmount(c) {
        return (c.checked) ? parseInt(c.value) : 0;
    }
    
    function doThing(cb) {
        doDefaults(cb);
        doTotals();
    }
	// end commenting javascript -->
	</SCRIPT>

</head>

<body>

<form method="POST" name="selectionForm">
  <p><b>Base Package</b><font face="Arial" size="2"><br>
  <input type="radio" name="Sauce" value=0. onclick="doThing(this);" checked> None<br>

  <input name="Sauce" type="radio"  value=250. onclick="doThing(this);"> 
	Package 1
  <br> 
  <input type="radio" name="Sauce" value=500. onclick="doThing(this);"> 
	Package 2
  <br>
  <input type="radio" name="Sauce" value=1000. onclick="doThing(this);"> 
	Package 3 </font></p>
	<p><b>Options</b><br>
  	<font face="Arial" size="2">Option 1 
  <input type="checkbox" name="Steak"   value=10.00  onclick="doTotals();">

  	<br>
  	Option 2 
  <input type="checkbox" name="Chicken" value=12.00 onclick="doTotals();">
  	<br>
  	Option 3 
  <input type="checkbox" name="Sushi"   value=15.00  onclick="doTotals();">
  <br>
	<br>
  <br>
  <br>

  <input type="hidden" name="calculatedTotal" value=0>
  <input type="hidden" name="previouslySelectedRadioButton" value=0>
  	</font> 
  <font face=Arial size=+1> 
  Total:</font><font face=Arial size=2><font size=+1> </font><font face=Arial size=2><font size=+1>
  <input type="text" name="total" readonly onFocus="this.blur();">
  </font></font><font size=+1> </font> <br>
  <br>

  </font> 
	</p>
</form>
</body>
</html>

*cLFlaVA
----------------------------
[tt]somebody set up us the bomb! [bomb]

[/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

audiaho · Jul 27, 2006

OK This is looking pretty good. What I tried to change was to add sections of radio buttons, and I got all the names mixed up and it's not working. Maybe we could change the names from Sauce, Sushi, Steak, Chicken and Fish to something I can understand, or throw in some directions on how to add more items. Each package needs to be able to automatically select one item from each group of radios, and the radios will have the values on them that will add up to the total price. Thanks SO MUCH for your help!!

http://www.directamish.com/orderform2.htm

cLFlaVA · Jul 27, 2006

what happened to all the checkboxes?

*cLFlaVA
----------------------------
[tt]somebody set up us the bomb! [bomb]

[/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

audiaho · Jul 27, 2006

tried changing them into radios...didnt work..

im a noob..haha sorry

audiaho · Jul 28, 2006

can you help me?

cLFlaVA · Jul 29, 2006

you should be able to take the extensive example i gave you and tweak it to work for you. i'm not inclined to change my code again, just to find out there are actually more or different fields that you want to be using on your page again.

so, try to make the changes, and if you experience problems with the changes you've made, please post back and ask for advice.

*cLFlaVA
----------------------------
[tt]somebody set up us the bomb! [bomb]

[/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

audiaho · Aug 10, 2006

Alright..I've got most of the categories created, with Radio buttons, but I don't know how to make it check one of the radios instead of just random check boxes by name. This is the only problem I'm having. Thanks

http://www.directamish.com/orderform.htm

Chris

cLFlaVA · Aug 10, 2006

shouldn't your code be like this?

Code:

var f = document.forms['selectionForm'];
var intPackageAmount = getPackageAmount(f.elements['Sauce']);
var intSteakAmount = getPackageAmount(f.elements['Steak']);
var intChickenAmount = getPackageAmount(f.elements['Chicken']);
var intFishAmount = getPackageAmount(f.elements['Sushi']);

also, all your steaks, chickens and sushis are the same value...

*cLFlaVA
----------------------------
[tt]somebody set up us the bomb! [bomb]

[/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

audiaho · Aug 10, 2006

Ok. I changed that top part of the code like you told me, and it didnt seem to change anything. The values are all the same because I just wanted to get it working first then I have to calculate what my values are going to be for certain. Thanks SO much

cLFlaVA · Aug 10, 2006

ok, so it works now?

*cLFlaVA
----------------------------
[tt]somebody set up us the bomb! [bomb]

[/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

audiaho · Aug 10, 2006

No, it didn't fix anything when I changed the code. It says NaN in the Total box when I click a package, and doesn't select any radios for me.

http://www.directamish.com/orderform.htm

Chris

cLFlaVA · Aug 10, 2006

sorry, maybe i wasn't clear enough with my first post (today), plus, i changed your doDefaults function...

Code:

    function doDefaults( cb ) {
        var f = document.forms['selectionForm'];
        var intCBValue = parseInt( cb.value );
        
        with (f) {
            switch( intCBValue ) {
                case 250:
                    elements['Steak'][0].checked = true;
                    elements['Chicken'][0].checked = true;
                    elements['Sushi'][0].checked = false;
                    break;
                case 500:
                    elements['Steak'][1].checked = false;
                    elements['Chicken'][1].checked = true;
                    elements['Sushi'][1].checked = true;
                    break;
                case 1000:
                    elements['Steak'][2].checked = true;
                    elements['Chicken'][2].checked = false;
                    elements['Sushi'][2].checked = true;
                    break;
                default:
                    elements['Steak'][3].checked = false;
                    elements['Chicken'][3].checked = false;
                    elements['Sushi'][3].checked = false;
            }
        }
    }
    
    function doTotals() {
        var f = document.forms['selectionForm'];
        var intPackageAmount = getPackageAmount(f.elements['Sauce']);
        var intSteakAmount = getPackageAmount(f.elements['Steak']);
        var intChickenAmount = getPackageAmount(f.elements['Chicken']);
        var intFishAmount = getPackageAmount(f.elements['Sushi']);
     
        f.elements['total'].value = intPackageAmount + intSteakAmount + intChickenAmount + intFishAmount;
    }

*cLFlaVA
----------------------------
[tt]somebody set up us the bomb! [bomb]

[/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

audiaho · Aug 10, 2006

Just a question...would it be possible to make the values of categories change depending on the base package that is chosen? Or would this be really hard?

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Forum question with javascript 1

audiaho

ISP

cLFlaVA

Programmer

audiaho

ISP

cLFlaVA

Programmer

audiaho

ISP

audiaho

ISP

cLFlaVA

Programmer

audiaho

ISP

cLFlaVA

Programmer

audiaho

ISP

cLFlaVA

Programmer

audiaho

ISP

cLFlaVA

Programmer

audiaho

ISP

Similar threads

Part and Inventory Search

Sponsor