Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    May 2009
    Posts
    48
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Getting the Sum of Two Variables

    I would like to multiply combo_1 and combo_2 to give an outcome and display it in the textbox of txt_price using javascript.

    f['txt_price'].value = (f['combo_1'].value).toFixed(2);

    This is something I was working on but no results so far. Any help would be greaty appreciated.

    <form>
    <select name="combo0" id="combo_0" onChange="change(this);" style="width:200px;">
    <option value="0">-select-</option>
    <option value="1">Canada</option>
    <option value="2">States</option>

    </select>
    <BR><BR>

    <!-- I would like to Multiply this field -->
    <select name="combo1" id="combo_1" onChange="change(this)" style="width:200px;">
    <option value="1"></option>
    </select>
    <label></label>
    <BR>
    <BR>

    <!-- and this field -->
    <select name="combo2" id="combo_2" onChange="change(this);" style="width:200px;">
    <option value="1"></option>
    </select>
    <BR>
    <br>

    <!-- To present an outcome to this field -->
    <input type="text" name="txtPrice" id="txt_price" onChange="change(this);" style="width:200px;">
    <BR>
    </form>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Here you are:-

    Code:
    <!-- I would like to Multiply this field -->
    <select name="combo1" id="combo_1" onChange="change(this);" style="width:200px;">
    <option value="0">-Select-</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    </select>
    <label></label>
    <BR>
    <BR>
    
    <!-- and this field -->
    <select name="combo2" id="combo_2" onChange="change(this);" style="width:200px;">
    <option value="0">-Select-</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    </select>
    <BR>
    <br>
    
    <!-- To present an outcome to this field -->
    <input type="text" name="txtPrice" id="txt_price"  style="width:200px; readonly">
    <BR>
    </form>  
           
    <script type = "text/javascript">
    function change() {
    document.getElementById("txt_price").value ="";
    var a = document.getElementById("combo1").value;
    var b = document.getElementById("combo2").value;
    if (a*b > 0 ){
    document.getElementById("txt_price").value = (a*b).toFixed(2);
    }
    }
    
    </script>

    A man explained inflation to his wife thus: 'When we married, you measured 36-24-36. Now you're 42-42-42. There's more of you, but you are not worth as much."

  • #3
    New Coder
    Join Date
    May 2009
    Posts
    48
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thank you, that almost works. It does to the calculation, but for some reason its not doing the math for the combo_1 and combo_2, just the initial combo_0. Which seems very weird, I think I have it placed in the wrong spot.

    Here is the full code I am practicing with.

    Thank you

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>untitled</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">

    <body>

    <script type="text/javascript">

    function setEvent(){
    var but, i=1;
    while(but=document.getElementById('calc_'+(i++))){
    but.onclick=calculate
    }
    }
    function calculate(){
    var f=this.form, grandtotV=0, j=1, i=1, but;
    while(but=document.getElementById('calc_'+(j++))){
    var oQty=f['qty_'+i];
    var oPrice=f['price_'+i];
    // var oTaxrate=f['taxrate_'+i];
    // var oSubtotal=f['subtotal_'+i];
    // var oTax=f['tax_'+i];
    // var oTotal=f['total_'+i];
    i++;
    var subV=Number(oQty.value)*Number(oPrice.value);
    // var taxV=subV*Number(oTaxrate.value);
    // var totV=subV+subV*Number(oTaxrate.value);
    var totV=subV;
    grandtotV+=totV;

    // oSubtotal.value=subV==0?'':subV.toFixed(2);
    // oTax.value=taxV==0?'':taxV.toFixed(2);
    // oTotal.value=totV==0?'':totV.toFixed(2);

    //if (qty_1 = 0)
    // {
    //alert("0");
    // }
    //else if (qty_1 = 1)
    // {
    //alert("1");
    //}
    //else if (qty_1 = 2)
    // {
    //alert("2");
    // }

    //}

    //alert('testing')

    f['testTotal'].value = (f['qty_1'].value).toFixed(2);
    //f['testTotal'].value = (f['price_1'].value * f['qty_1'].value).toFixed(2);
    f['partstotal'].value=grandtotV.toFixed(2);
    f['tax'].value = (f['partstotal'].value * f['taxrate'].value).toFixed(2);
    f['gtotal'].value = ((f['partstotal'].value * f['taxrate'].value) + grandtotV).toFixed(2);

    }

    onload=setEvent
    </script>

    <form action="">
    <div>

    <script language="JavaScript" type="text/javascript">
    <!--

    /*
    *** Multiple dynamic combo boxes
    *** by Mirko Elviro, 9 Mar 2005
    *** Script featured and available on JavaScript Kit (http://www.javascriptkit.com)
    ***
    ***Please do not remove this comment
    */

    // This script supports an unlimited number of linked combo boxed
    // Their id must be "combo_0", "combo_1", "combo_2" etc.
    // Here you have to put the data that will fill the combo boxes
    // ie. data_2_1 will be the first option in the second combo box
    // when the first combo box has the second option selected

    // first combo box

    data_1 = new Option("Canada", "$");
    data_2 = new Option("States", "$$");

    // second combo box

    // Canada - Quantity
    data_1_1 = new Option("1", "-");
    data_1_2 = new Option("2", "-");
    data_1_3 = new Option("3", "-");
    data_1_4 = new Option("4", "-");
    data_1_5 = new Option("5", "-");
    data_1_6 = new Option("6", "-");
    data_1_7 = new Option("7", "-");
    data_1_8 = new Option("8", "-");
    data_1_9 = new Option("9", "-");
    data_1_10 = new Option("10", "-");

    // States - Quantity
    data_2_1 = new Option("1", "-");
    data_2_2 = new Option("2", "-");
    data_2_3 = new Option("3", "-");
    data_2_4 = new Option("4", "-");
    data_2_5 = new Option("5", "-");
    data_2_6 = new Option("6", "-");
    data_2_7 = new Option("7", "-");
    data_2_8 = new Option("8", "-");
    data_2_9 = new Option("9", "-");
    data_2_10 = new Option("10", "-");

    // Canada - Price
    data_1_1_1 = new Option("1", "*");
    data_1_1_2 = new Option("2", "*");
    data_1_1_3 = new Option("3", "*");
    data_1_1_4 = new Option("4", "*");
    data_1_1_5 = new Option("5", "*");
    data_1_1_6 = new Option("6", "*");
    data_1_1_7 = new Option("7", "*");
    data_1_1_8 = new Option("8", "*");
    data_1_1_9 = new Option("9", "*");
    data_1_1_10 = new Option("10", "*");

    data_1_2_1 = new Option("1", "*");
    data_1_2_2 = new Option("2", "*");
    data_1_2_3 = new Option("3", "*");
    data_1_2_4 = new Option("4", "*");
    data_1_2_5 = new Option("5", "*");
    data_1_2_6 = new Option("6", "*");
    data_1_2_7 = new Option("7", "*");
    data_1_2_8 = new Option("8", "*");
    data_1_2_9 = new Option("9", "*");
    data_1_2_10 = new Option("10", "*");

    data_1_3_1 = new Option("1", "*");
    data_1_3_2 = new Option("2", "*");
    data_1_3_3 = new Option("3", "*");
    data_1_3_4 = new Option("4", "*");
    data_1_3_5 = new Option("5", "*");
    data_1_3_6 = new Option("6", "*");
    data_1_3_7 = new Option("7", "*");
    data_1_3_8 = new Option("8", "*");
    data_1_3_9 = new Option("9", "*");
    data_1_3_10 = new Option("10", "*");

    data_1_4_1 = new Option("1", "*");
    data_1_4_2 = new Option("2", "*");
    data_1_4_3 = new Option("3", "*");
    data_1_4_4 = new Option("4", "*");
    data_1_4_5 = new Option("5", "*");
    data_1_4_6 = new Option("6", "*");
    data_1_4_7 = new Option("7", "*");
    data_1_4_8 = new Option("8", "*");
    data_1_4_9 = new Option("9", "*");
    data_1_4_10 = new Option("10", "*");

    data_1_5_1 = new Option("1", "*");
    data_1_5_2 = new Option("2", "*");
    data_1_5_3 = new Option("3", "*");
    data_1_5_4 = new Option("4", "*");
    data_1_5_5 = new Option("5", "*");
    data_1_5_6 = new Option("6", "*");
    data_1_5_7 = new Option("7", "*");
    data_1_5_8 = new Option("8", "*");
    data_1_5_9 = new Option("9", "*");
    data_1_5_10 = new Option("10", "*");

    data_1_6_1 = new Option("1", "*");
    data_1_6_2 = new Option("2", "*");
    data_1_6_3 = new Option("3", "*");
    data_1_6_4 = new Option("4", "*");
    data_1_6_5 = new Option("5", "*");
    data_1_6_6 = new Option("6", "*");
    data_1_6_7 = new Option("7", "*");
    data_1_6_8 = new Option("8", "*");
    data_1_6_9 = new Option("9", "*");
    data_1_6_10 = new Option("10", "*");

    data_1_7_1 = new Option("1", "*");
    data_1_7_2 = new Option("2", "*");
    data_1_7_3 = new Option("3", "*");
    data_1_7_4 = new Option("4", "*");
    data_1_7_5 = new Option("5", "*");
    data_1_7_6 = new Option("6", "*");
    data_1_7_7 = new Option("7", "*");
    data_1_7_8 = new Option("8", "*");
    data_1_7_9 = new Option("9", "*");
    data_1_7_10 = new Option("10", "*");

    data_1_8_1 = new Option("1", "*");
    data_1_8_2 = new Option("2", "*");
    data_1_8_3 = new Option("3", "*");
    data_1_8_4 = new Option("4", "*");
    data_1_8_5 = new Option("5", "*");
    data_1_8_6 = new Option("6", "*");
    data_1_8_7 = new Option("7", "*");
    data_1_8_8 = new Option("8", "*");
    data_1_8_9 = new Option("9", "*");
    data_1_8_10 = new Option("10", "*");

    data_1_9_1 = new Option("1", "*");
    data_1_9_2 = new Option("2", "*");
    data_1_9_3 = new Option("3", "*");
    data_1_9_4 = new Option("4", "*");
    data_1_9_5 = new Option("5", "*");
    data_1_9_6 = new Option("6", "*");
    data_1_9_7 = new Option("7", "*");
    data_1_9_8 = new Option("8", "*");
    data_1_9_9 = new Option("9", "*");
    data_1_9_10 = new Option("10", "*");

    data_1_10_1 = new Option("1", "*");
    data_1_10_2 = new Option("2", "*");
    data_1_10_3 = new Option("3", "*");
    data_1_10_4 = new Option("4", "*");
    data_1_10_5 = new Option("5", "*");
    data_1_10_6 = new Option("6", "*");
    data_1_10_7 = new Option("7", "*");
    data_1_10_8 = new Option("8", "*");
    data_1_10_9 = new Option("9", "*");
    data_1_10_10 = new Option("10", "*");

    // States - Price
    data_2_1_1 = new Option("1", "*");
    data_2_1_2 = new Option("2", "*");
    data_2_1_3 = new Option("3", "*");
    data_2_1_4 = new Option("4", "*");
    data_2_1_5 = new Option("5", "*");
    data_2_1_6 = new Option("6", "*");
    data_2_1_7 = new Option("7", "*");
    data_2_1_8 = new Option("8", "*");
    data_2_1_9 = new Option("9", "*");
    data_2_1_10 = new Option("10", "*");

    data_2_2_1 = new Option("1", "*");
    data_2_2_2 = new Option("2", "*");
    data_2_2_3 = new Option("3", "*");
    data_2_2_4 = new Option("4", "*");
    data_2_2_5 = new Option("5", "*");
    data_2_2_6 = new Option("6", "*");
    data_2_2_7 = new Option("7", "*");
    data_2_2_8 = new Option("8", "*");
    data_2_2_9 = new Option("9", "*");
    data_2_2_10 = new Option("10", "*");

    data_2_3_1 = new Option("1", "*");
    data_2_3_2 = new Option("2", "*");
    data_2_3_3 = new Option("3", "*");
    data_2_3_4 = new Option("4", "*");
    data_2_3_5 = new Option("5", "*");
    data_2_3_6 = new Option("6", "*");
    data_2_3_7 = new Option("7", "*");
    data_2_3_8 = new Option("8", "*");
    data_2_3_9 = new Option("9", "*");
    data_2_3_10 = new Option("10", "*");

    data_2_4_1 = new Option("1", "*");
    data_2_4_2 = new Option("2", "*");
    data_2_4_3 = new Option("3", "*");
    data_2_4_4 = new Option("4", "*");
    data_2_4_5 = new Option("5", "*");
    data_2_4_6 = new Option("6", "*");
    data_2_4_7 = new Option("7", "*");
    data_2_4_8 = new Option("8", "*");
    data_2_4_9 = new Option("9", "*");
    data_2_4_10 = new Option("10", "*");

    data_2_5_1 = new Option("1", "*");
    data_2_5_2 = new Option("2", "*");
    data_2_5_3 = new Option("3", "*");
    data_2_5_4 = new Option("4", "*");
    data_2_5_5 = new Option("5", "*");
    data_2_5_6 = new Option("6", "*");
    data_2_5_7 = new Option("7", "*");
    data_2_5_8 = new Option("8", "*");
    data_2_5_9 = new Option("9", "*");
    data_2_5_10 = new Option("10", "*");

    data_2_6_1 = new Option("1", "*");
    data_2_6_2 = new Option("2", "*");
    data_2_6_3 = new Option("3", "*");
    data_2_6_4 = new Option("4", "*");
    data_2_6_5 = new Option("5", "*");
    data_2_6_6 = new Option("6", "*");
    data_2_6_7 = new Option("7", "*");
    data_2_6_8 = new Option("8", "*");
    data_2_6_9 = new Option("9", "*");
    data_2_6_10 = new Option("10", "*");

    data_2_7_1 = new Option("1", "*");
    data_2_7_2 = new Option("2", "*");
    data_2_7_3 = new Option("3", "*");
    data_2_7_4 = new Option("4", "*");
    data_2_7_5 = new Option("5", "*");
    data_2_7_6 = new Option("6", "*");
    data_2_7_7 = new Option("7", "*");
    data_2_7_8 = new Option("8", "*");
    data_2_7_9 = new Option("9", "*");
    data_2_7_10 = new Option("10", "*");

    data_2_8_1 = new Option("1", "*");
    data_2_8_2 = new Option("2", "*");
    data_2_8_3 = new Option("3", "*");
    data_2_8_4 = new Option("4", "*");
    data_2_8_5 = new Option("5", "*");
    data_2_8_6 = new Option("6", "*");
    data_2_8_7 = new Option("7", "*");
    data_2_8_8 = new Option("8", "*");
    data_2_8_9 = new Option("9", "*");
    data_2_8_10 = new Option("10", "*");

    data_2_9_1 = new Option("1", "*");
    data_2_9_2 = new Option("2", "*");
    data_2_9_3 = new Option("3", "*");
    data_2_9_4 = new Option("4", "*");
    data_2_9_5 = new Option("5", "*");
    data_2_9_6 = new Option("6", "*");
    data_2_9_7 = new Option("7", "*");
    data_2_9_8 = new Option("8", "*");
    data_2_9_9 = new Option("9", "*");
    data_2_9_10 = new Option("10", "*");

    data_2_10_1 = new Option("1", "*");
    data_2_10_2 = new Option("2", "*");
    data_2_10_3 = new Option("3", "*");
    data_2_10_4 = new Option("4", "*");
    data_2_10_5 = new Option("5", "*");
    data_2_10_6 = new Option("6", "*");
    data_2_10_7 = new Option("7", "*");
    data_2_10_8 = new Option("8", "*");
    data_2_10_9 = new Option("9", "*");
    data_2_10_10 = new Option("10", "*");

    // fourth combo box

    data_2_2_1_1 = new Option("2211","%")
    data_2_2_1_2 = new Option("2212","%%")

    // other parameters

    displaywhenempty=""
    valuewhenempty=-1

    displaywhennotempty="-select-"
    valuewhennotempty=0


    function change(currentbox) {
    numb = currentbox.id.split("_");
    currentbox = numb[1];

    i=parseInt(currentbox)+1

    // I empty all combo boxes following the current one

    while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
    (document.getElementById("combo_"+i)!=null)) {
    son = document.getElementById("combo_"+i);
    // I empty all options except the first one (it isn't allowed)
    for (m=son.options.length-1;m>0;m--) son.options[m]=null;
    // I reset the first option
    son.options[0]=new Option(displaywhenempty,valuewhenempty)
    i=i+1
    }


    // now I create the string with the "base" name ("stringa"), ie. "data_1_0"
    // to which I'll add _0,_1,_2,_3 etc to obtain the name of the combo box to fill

    stringa='data'
    i=0
    while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
    (document.getElementById("combo_"+i)!=null)) {
    eval("stringa=stringa+'_'+document.getElementById(\"combo_"+i+"\").selectedIndex")
    if (i==currentbox) break;
    i=i+1
    }


    // filling the "son" combo (if exists)

    following=parseInt(currentbox)+1

    if ((eval("typeof(document.getElementById(\"combo_"+following+"\"))!='undefined'")) &&
    (document.getElementById("combo_"+following)!=null)) {
    son = document.getElementById("combo_"+following);
    stringa=stringa+"_"
    i=0
    while ((eval("typeof("+stringa+i+")!='undefined'")) || (i==0)) {

    // if there are no options, I empty the first option of the "son" combo
    // otherwise I put "-select-" in it

    if ((i==0) && eval("typeof("+stringa+"0)=='undefined'"))
    if (eval("typeof("+stringa+"1)=='undefined'"))
    eval("son.options[0]=new Option(displaywhenempty,valuewhenempty)")
    else
    eval("son.options[0]=new Option(displaywhennotempty,valuewhennotempty)")
    else
    eval("son.options["+i+"]=new Option("+stringa+i+".text,"+stringa+i+".value)")
    i=i+1
    }
    //son.focus()
    i=1
    combostatus=''
    cstatus=stringa.split("_")
    while (cstatus[i]!=null) {
    combostatus=combostatus+cstatus[i]
    i=i+1
    }
    return combostatus;
    }
    }

    //f['txt_price'].value = (f['combo_1'].value).toFixed(2);

    //-->
    onload=setEvent
    </script>

    <form>
    <select name="combo0" id="combo_0" onChange="change(this);" style="width:200px;">
    <option value="0">-select-</option>
    <option value="1">Canada</option>
    <option value="2">States</option>

    </select>
    <BR><BR>

    <!-- I would like to Multiply this field -->
    <select name="combo1" id="combo_1" onChange="change(this)" style="width:200px;">
    <option value="1"></option>
    </select>
    <label></label>
    <BR>
    <BR>

    <!-- and this field -->
    <select name="combo2" id="combo_2" onChange="change(this);" style="width:200px;">
    <option value="1"></option>
    </select>
    <BR>
    <br>

    <!-- To present an outcome to this field -->
    <input type="text" name="txtPrice" id="txt_price" onChange="change(this);" style="width:200px;">
    <BR>
    </form>

    <script type = "text/javascript">
    function change() {
    document.getElementById("txt_price").value = "";
    var a = document.getElementById("combo_1").value;
    var b = document.getElementById("combo_2").value;
    if (a*b > 0 ){
    document.getElementById("txt_price").value = (a*b).toFixed(2);
    }
    }



    </script>

    <label>TestTotal
    <input type="text" name="testTotal" id="testTotal">
    </label>
    <br>
    Price:
    <input type="text" name='price_1'>
    <br>
    <input type="button" value="Calculate" id="calc_1">
    Tax Rate:
    <input type="text" name="taxrate" value="0.0825">
    <br>
    Tax:
    <input type="text" name="tax" readonly="readonly">
    <br>
    Sub Total:
    <input type="text" name="partstotal" readonly="readonly">
    <br>
    Grand Total:
    <input type="text" name="gtotal" readonly="readonly">
    </form>

    <!-- ####################### stop copying the body menu code here ####################### -->
    <br>
    <br>
    <br>
    <label></label>
    </body>
    </html>

  • #4
    New Coder
    Join Date
    May 2009
    Posts
    48
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Issue resolved, that you very much. Here is the working code.

    <select name="combo1" id="combo_1" style="width:200px;">

    <option value="1">1</option>

    <option value="2">2</option>

    <option value="3">3</option>

    </select>

    <label></label>

    <BR>

    <BR>



    <!-- and this field -->

    <select name="combo2" id="combo_2" style="width:200px;">

    <option value="1">1</option>

    <option value="5">5</option>

    </select>

    <BR>

    <br>



    <!-- To present an outcome to this field -->

    <input type="text" name="txtPrice" id="txt_price" style="width:200px;">

    <BR>

    </form>



    <script type="text/javascript">

    // avoid using inline script like onclick and onchange, bad practice.

    window.onload = function() {

    var dropChange = function() {

    var v1 = document.getElementById("combo_1").value, v2 = document.getElementById("combo_2").value;

    document.getElementById("txt_price").value = v1 * v2;

    };



    document.getElementById("combo_1").onchange = dropChange;

    document.getElementById("combo_2").onchange = dropChange;

    };

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by Wayniac View Post
    while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
    (document.getElementById("combo_"+i)!=null)) {
    eval("stringa=stringa+'_'+document.getElementById(\"combo_"+i+"\").selectedIndex")
    if (i==currentbox) break;
    i=i+1
    }


    // filling the "son" combo (if exists)

    following=parseInt(currentbox)+1

    if ((eval("typeof(document.getElementById(\"combo_"+following+"\"))!='undefined'")) &&
    (document.getElementById("combo_"+following)!=null)) {
    son = document.getElementById("combo_"+following);
    stringa=stringa+"_"
    i=0
    while ((eval("typeof("+stringa+i+")!='undefined'")) || (i==0)) {

    // if there are no options, I empty the first option of the "son" combo
    // otherwise I put "-select-" in it

    if ((i==0) && eval("typeof("+stringa+"0)=='undefined'"))
    if (eval("typeof("+stringa+"1)=='undefined'"))
    eval("son.options[0]=new Option(displaywhenempty,valuewhenempty)")
    else
    eval("son.options[0]=new Option(displaywhennotempty,valuewhennotempty)")
    else
    eval("son.options["+i+"]=new Option("+stringa+i+".text,"+stringa+i+".value)")
    i=i+1
    }

    eval() - Old Pedant and Kor will throw blue fits!


  •  

    Posting Permissions

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