SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: drop down boxes

  1. #1
    SitePoint Zealot
    Join Date
    Jun 2004
    Location
    UK
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    drop down boxes

    Hi,

    I'm just trying to find the best method of updating a running total of the value of list boxes. I basically have 6 items and I want a drop down box listing quantities. when a number is selected I want a total to update beneath.

    I'm not sure I can do this in PHP without reloading the page. Do i need to use Java script? if so I'm a total newbie can someone point me in the right direction?

    Thanks.

  2. #2
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    you will need to use Javascript to do this.
    Ryan B | My Blog | Twitter

  3. #3
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Here is a way to do it. I have added the individual item totals so that you can see how each changes. I have commented within the script so you should be able to follow the logic.

    Code :
    <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
     
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Running Totals</title>
    <script type="text/javascript">
    <!--
     function getTotals(selectObj)
      {// check for invalid selection 
        if(selectObj.selectedIndex==0){return; }
         // ---------
       // process valid selection 
       // shorcut to selected index 
        var indx=selectObj.selectedIndex;
       // shortcut to selected option object 
        var optionObj=selectObj.options[indx];
       // get value 
        var itemTot=optionObj.value;
       // decrement option value by 1 
        optionObj.value=itemTot-1;
       // build ref to text box for colour total 
        var boxRef=optionObj.text.toLowerCase()+"Tot";
       // shortcut to colour text box 
        var boxObj=document.myForm[boxRef];
       // change sub total
        boxObj.value=optionObj.value;
       // indicate changed box 
        boxObj.select(); 
       // loop through all option values for grand total
        var allTotals=new Number();   // make a number to avoid summing errors
        for(var i=1; i<selectObj.options.length; i++)
         { allTotals+=parseInt(selectObj.options[i].value);
         }
     // update allTotals box    
      document.myForm.txtTotals.value=allTotals;
     // reset selection so can select the same again if reqd.
      document.myForm.mySelect.selectedIndex=0;
      }
    //-->
    </script>
    <style type="text/css">
    <!--
    body { font-family:arial, helvetica, sans-serif; color:#000080; font-weight:bold; font-size:12px; }
    p { float:left; margin:10px; }
    .m10 { margin:10px; }
    -->
    </style>
    </head>
     
    <body>
     
    <div class="m10">
      Select an item to remove from stock</div>
    <form name="myForm">
      <p><select name="mySelect" onchange="getTotals(this)">
      <option value="0">Select here ..</option>
      <option value="100">Red</option>
      <option value="200">Green</option>
      <option value="300">Blue</option>
      </select></p>
      <p>All totals: <input type="text" name="txtTotals" value="600" size="10"></p>
      <p>Red totals: <input type="text" name="redTot" value="100" size="10"></p>
      <p>Green totals: <input type="text" name="greenTot" value="200" size="10"></p>
      <p>Blue totals: <input type="text" name="blueTot" value="300" size="10"></p>
    </form>
    <!-- end myForm -->
     
    </body>
     
    </html>


Bookmarks

Posting Permissions

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