Huge Javascript question and help...

CBRyder13 · #1 (**permalink**) 10-02-04, 05:52 PM

Hello everyone. I am building a website for my current computer business. I have been spending countless hours of research trying to figure out how to make a form where selecting one option affects something else (such as a price) on the page. A perfect example of this can be found HERE

As you can see by following that link, the price on the bottom of the page changes depending on what options you select, or deselect. That is basically what I am trying to accomplish on my website.

I heard from somewhere this can be accomplished by using javascript. I am not too experianced with javascript so any help what so ever would be great. If possible, could someone help me with this or steer me in the right direction?

TwoD · #2 (**permalink**) 10-04-04, 12:47 AM

This is very easy to do.
When you change to another option on a selectbox, an event called onChange is fired. You can set this event to do what you want (call a JavaScript function for example).

Here's a basic example

Code:

<script>
function Recount(){
  var sum=0
  for(i=1;i<=2;i++){
    var box=document.getElementById('box'+i)
    sum+=parseFloat(box.options[box.selectedId].value)
  }
  document.getElementById('total').value=sum
}
</script>

<form>
<select id="box1" onchange="Recount()">
<option value=100>Item 1
<option value=200>Item 2
</select><p>
<select id="box2" onchange="Recount()">
<option value=500>Item 1
<option value=700>Item 2
</select><p>
<input type="text" value="total">
</form>

CBRyder13 · #3 (**permalink**) 10-04-04, 05:47 AM

That code doesn't work.

Oh, I have a quick question. If I were to search on google for this, what would I call it? What would I type in google to get results?

TwoD · #4 (**permalink**) 10-04-04, 08:05 AM

Sorry, I just wrote it of the top of my head before school started this morning. I had no time to test it so I made a few mistakes...
Here's how it should look:

Code:

<html>
<head>
</head>
<body>
<script>
function Recount(){
  var sum=0
  for(i=1;i<=2;i++){
    var box=document.getElementById('box'+i)
    sum+=parseFloat(box.options[box.selectedIndex].value)
  }
  document.getElementById('total').value=sum
}
</script>

<form>
<select id="box1" onchange="Recount()">
<option value=100 selected>Item 1
<option value=200>Item 2
</select><p>
<select id="box2" onchange="Recount()">
<option value=500 selected>Item 1
<option value=700>Item 2
</select><p>
<input type="text" id="total">
</form>
</body>
</html>

Anyway, I meant it just as an example to show you where to start looking for solutions to your problem

CBRyder13 · #5 (**permalink**) 10-16-04, 02:16 PM

Ok, that works and i've made it how I want. But now when when I add a submit and reset button and have it set up to use formmail it doesn't send the information with it. It just sends the submit: submit to the email its supposed to email the information to. Basically it works fine, but the only thing is that it doesn't send whats in the drop-down menus or the price. What do I need to do so it sends all the information in the form?

This is what I have.... http://www.hypertecpc.com/custompc.html
That one works fine

This is what is not working.... http://www.hypertecpc.com/xxxcustompc.html
It works, but its not sending ALL the information.

CBRyder13 · #6 (**permalink**) 10-28-04, 02:46 PM

I solved the problem I was having about nothing sending when clicking the submit button. Now I have another problem with that script you shared with me above.

When I add more than 2 drop-down menu's, the "total" price doesn't work with the extra drop-down fields. As you can see at http://68.82.122.28/custompc.com I have the two drop down fields there. They work and the total price shows up in the button. When I add another drop-down menu and make it box3 and do the necessary changes, it acts as though it adds $0.00 to the current price or its just not working.

If anyone knows a solution to this please help me out. Thanks!

TwoD · #7 (**permalink**) 10-29-04, 02:27 AM

The link you posted doesn't work but I assume it should be .html instead och .com.
To me it looks like it's working. The price changes correctly when I change one of the top 3 selectboxes....

CBRyder13 · #8 (**permalink**) 02-10-05, 11:04 PM

Ok, I know it's been awhile, but....
For some of the prices I have, and depending on what is selected, the price may look like this, for example: $1673.833373848373

In that code, what could be done to make it round to the nearest hundredths?

Thanks

TwoD · #9 (**permalink**) 02-11-05, 04:54 AM

Yes. You just have to do something like

Code:

document.getElementById('total').value=Math.round(sum*100)/100