Updating a Price based on dropdown selection

Discussion in 'HTML & Website Design' started by Brian Gallant, Mar 30, 2013.

0
  1. #1
    Hi,

    Been out of website design for many years now. I have however had a couple little projects i've been working on to help out my boss. Mostly php and mysql based stuff which is no problem.

    What I'm needing to do now is make a computer builder program just for him to use internally to make giving a quote on a new computer system quicker for him.

    I'll be storing all my inventory in mysql and pulling the data into dropdown boxes so he can just select everything he wants. This I have no problem with.

    Where I need help is:

    How can i get the price on the page to update automatically every time he selects a different part? I'm sure this is probably a super simple script and I'm hoping someone can take a couple minutes to help me out.

    Thanks in advance!
     
    Brian Gallant, Mar 30, 2013 IP
  2. rolodex

    rolodex Well-Known Member

    Messages:
    364
    Likes Received:
    37
    Best Answers:
    5
    Trophy Points:
    175
    #2
    You use a php script that takes data from the database and javascript it to update the tables on the website without reloading the page. How's that for super simple?

    This method is AJAX.
     
    Last edited: Mar 31, 2013
    rolodex, Mar 31, 2013 IP
  3. joshwebguy

    joshwebguy Active Member

    Messages:
    21
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    61
    #3
    Here's a really easy way to do it. Just use PHP to generate the IF statements in the Javascript function and the menu items in the dropdown.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test Document of Awesome</title>
   
    <script type="text/javascript">
        function update_price() {
            if ( document.getElementById("test_menu").value == "1" ) document.getElementById("price").innerHTML = "5.00";
            if ( document.getElementById("test_menu").value == "2" ) document.getElementById("price").innerHTML = "10.00";
            if ( document.getElementById("test_menu").value == "3" ) document.getElementById("price").innerHTML = "20.00";
        }
    </script>
 
</head>
 
<body>
 
    <select id="test_menu" onChange="update_price()">
      <option value="1">Test Item 1</option>
      <option value="2">Test Item 2</option>
      <option value="3">Test Item 3</option>
    </select>
   
    <h3>Price: $<span id="price">0.00</span></h3>
 
</body>
</html>
    HTML:
     
    joshwebguy, Mar 31, 2013 IP