DevX Home    Today's Headlines   Articles Archive   Tip Bank   Forums   

Results 1 to 2 of 2

Thread: Pass calculated value of SELECT box to php?

  1. #1
    Join Date
    Aug 2007

    Pass calculated value of SELECT box to php?

    Hi all

    here's what I need to achieve:

    I have four select boxes on a form - all with values 0-100 (in increments of 10).

    The total of all values must add up to 100.

    E.g The first select box displays options 0-100 - let's say the user clicks 25.

    the second select box should then display options - 0-75. Let's say the user clicks 15.

    The third select box should offer options 0-60. This time the user clicks 60.

    The fourth select box offers only 0.

    The select boxes are being populated using a php loop.

    I have tried to store the value of the first select box in a cookie using JScript and then read it back using php - it almost worked but seems to require a page refresh.

    I considered storing the value in the registry instead of a cookie ...

    then it hit me - AJAX!

    All I really want to do is pass the value of each SELECT box and set the loop bounds for the next SELECT box accordingly.

    Can anyone offer a simple way of implementing this?

    thanks guys

  2. #2
    Join Date
    Aug 2007
    Take a look at this:

    select {visibility:hidden}
    <script language="JavaScript">
    var maxValue = 100;
    function start(){
    // Be sure that first select is visible at startup
    document.getElementById("select1").style.visibility = "visible";

    function calculate(elemNo){
    // generate current and next select's name
    var currElemName = "select" + elemNo;
    var nextElemName = "select" + (elemNo+1);
    // and create corresponding objects
    var currElem = document.getElementById(currElemName);
    var nextElem = null;
    // skip if there is no next element
    // try to create next element
    var nextElem = document.getElementById(nextElemName);
    // everithing is fine, initialize sum of selected options
    var selValue = 0;
    // perform summing
    for(var i=0; i < elemNo; i++)
    selValue += parseInt(document.getElementById("select"+(i+1)).options[document.getElementById("select"+(i+1)).selectedIndex].value);
    // calculate max value for next element
    maxValue = 100 - selValue;
    // clear data,
    while (nextElem.options.length > 1){
    nextElem.options[0] = null;
    // show it, = "visible";
    // and populate it
    for(var i=0, optValue=0; optValue <= maxValue; i++, optValue += 10)
    nextElem.options[i] = new Option(optValue, optValue);
    // hide all others
    for(var i=elemNo+1; i < 4; i++){
    // elegant way to escape from javascript error ; simply do nothing
    <body bgcolor="#FFFFFF" text="#000000" link="#804040" vlink="#008080" alink="#004080" onLoad="start();">
    <form name="frm" method="POST">
    <select name="select1" id="select1" onchange="calculate(1);">
    <option value=0>0</option>
    <option value=10>10</option>
    <option value=20>20</option>
    <option value=30>30</option>
    <option value=40>40</option>
    <option value=50>50</option>
    <option value=60>60</option>
    <option value=70>70</option>
    <option value=80>80</option>
    <option value=90>90</option>
    <option value=100>100</option>
    <select name="select2" id="select2" onchange="calculate(2);">
    <select name="select3" id="select3" onchange="calculate(3);">
    <select name="select4" id="select4" onchange="calculate(4);">

Similar Threads

  1. Replies: 3
    Last Post: 05-12-2008, 12:34 PM
  2. Replies: 5
    Last Post: 08-18-2006, 01:15 PM
  3. preselecting struts select box
    By G.Singh in forum Java
    Replies: 0
    Last Post: 08-14-2006, 08:40 AM
  4. Replies: 0
    Last Post: 08-15-2005, 12:00 AM
  5. Replies: 1
    Last Post: 02-10-2001, 02:53 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center
Latest Articles
Questions? Contact us.
Web Development
Latest Tips
Open Source

   Development Centers

   -- Android Development Center
   -- Cloud Development Project Center
   -- HTML5 Development Center
   -- Windows Mobile Development Center