Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

Thanks a lot guys for the all the help - really appreciate it.

However, what I want to do next is really complicated and I am certain you guys have the brains to help me.

This is the more complex code I would also like to write in a better way - less code, more efficient.

Sorry but this is a lot of code.

JS:

function keyTechAdoption() {
        var keyTechBox = document.getElementById('keyTechTextBox');
        var sVOption = document.getElementById("dropdown_serverVirtualisation");
        var sV_Value = 10;
        var dVOption = document.getElementById("dropdown_desktopVirtualisation");
        var dV_Value = 20;

// Server Virtualisation Value ----------------------------------------------------------------------------------------- //
        if (sVOption.options[sVOption.selectedIndex].value === "N") {sV1 = null; sV2 = 0;}
        if (sVOption.options[sVOption.selectedIndex].value === "G") {sV1 = sV_Value * 1; sV2 = sV_Value * 1;}
        if (sVOption.options[sVOption.selectedIndex].value === "O") {sV1 = sV_Value * 0.3; sV2 = sV_Value * 1;}
        if (sVOption.options[sVOption.selectedIndex].value === "A") {sV1 = sV_Value * 0.5; sV2 = sV_Value * 1}
        if (sVOption.options[sVOption.selectedIndex].value === "R") {sV1 = 0; sV2 = sV_Value * 1;}
        else if (sVOption.options[sVOption.selectedIndex].value === "U") {sV1 = 0; sV2 = sV_Value * 1;}
        // Server Virtualisation Value ----------------------------------------------------------------------------------------- //

        // Desktop Virtualisation Value ----------------------------------------------------------------------------------------- //
        if (dVOption.options[dVOption.selectedIndex].value === "N") {dV1 = null; dV2 = 0;}
        if (dVOption.options[dVOption.selectedIndex].value === "G") {dV1 = dV_Value * 1; dV2 = dV_Value * 1}
        if (dVOption.options[dVOption.selectedIndex].value === "O") {dV1 = dV_Value * 0.3; dV2 = dV_Value * 1;}
        if (dVOption.options[dVOption.selectedIndex].value === "A") {dV1 = dV_Value * 0.5;dV2 = dV_Value * 1}
        if (dVOption.options[dVOption.selectedIndex].value === "R") {dV1 = 0; dV2 = dV_Value * 1;}
        else if (dVOption.options[dVOption.selectedIndex].value === "U") {dV1 = 0; dV2 = dV_Value * 1;}
        // Desktop Virtualisation Value ----------------------------------------------------------------------------------
var keyTechTotal1 = sV1 + dV1;
        var keyTechTotal2 = sV2 + dV2;
        var keyTechPercentage = (keyTechTotal1) / (keyTechTotal2) * 100
        if (keyTechTotal1 > 0) {keyTechBox.value = keyTechPercentage.toFixed(0) + "%";}
        else {keyTechBox.value = 0 + "%";}

}

HTML:

    <input class="textBox" runat="server" type="text" id="keyTechTextBox" readonly="true" />
<select class="selectElement" runat="server" id="dropdown_serverVirtualisation" onchange="keyTechAdoption()">
                        <option value="N">N</option>
                        <option value="G">G</option>
                        <option value="O">O</option>
                        <option value="A">A</option>
                        <option value="R">R</option>
                        <option value="U">U</option>
                    </select>
<select class="selectElement" runat="server" id="dropdown_desktopVirtualisation" onchange="keyTechAdoption()">
                        <option value="N">N</option>
                        <option value="G">G</option>
                        <option value="O">O</option>
                        <option value="A">A</option>
                        <option value="R">R</option>
                        <option value="U">U</option>
                    </select>

I cannot thank you amazing people enough for your help and time :)

share|improve this question
2  
Well first of all multiplying by 1 does not do anything. What are the magic numbers from? –  thatidiotguy May 15 at 18:50
1  
@thatidiotguy Multiplying by 1 will convert a string to a number though, but isn't applicable since select1_control is 10 –  Ian May 15 at 18:53
 
@thatidiotguy thanks - that makes sense - why did i even have it there –  Singh May 15 at 18:54
add comment

5 Answers

up vote 2 down vote accepted

this is why i like jquery...30 lines of code = 6 lines.. :)

using HTML5 data attribute and jquery..just need to add your values in data attribute..

HTML

<input type="text" id="resultBox" readonly="true" />
<select id="dropdown_test" >
 <option value="N" data-one="0" data-two="0">N</option>
 <option value="G" data-one="1" data-two="1">G</option>
 <option value="O" data-one="0.3" data-two="1">O</option>
 <option value="A" data-one="0.5" data-two="1">A</option>
 <option value="R" data-one="0" data-two="1">R</option>
 <option value="U" data-one="0" data-two="1">U</option>
</select>

jquery

$(function(){
  $('#dropdown_test').change(function(){
    var select1_control = 10;
    var str= select1_control * $(this).find('option:selected').data('one') +    select1_control * $(this).find('option:selected').data('two');
    $('#resultBox').val(str);
 });
});

fiddle here

updated

like i said ... just need to add data attribute in both the select box..

html

<input class="textBox" runat="server" type="text" id="keyTechTextBox" readonly="true" />
<select class="selectElement" runat="server" id="dropdown_serverVirtualisation">
  <option value="N" data-one="0" data-two="0">N</option>
  <option value="G" data-one="1" data-two="1">G</option>
  <option value="O" data-one="0.3" data-two="1">O</option>
  <option value="A" data-one="0.5" data-two="1">A</option>
  <option value="R" data-one="0" data-two="1">R</option>
  <option value="U" data-one="0" data-two="1">U</option>
</select>
<select class="selectElement" runat="server" id="dropdown_desktopVirtualisation">
  <option value="N" data-one="0" data-two="0">N</option>
  <option value="G" data-one="1" data-two="1">G</option>
  <option value="O" data-one="0.3" data-two="1">O</option>
  <option value="A" data-one="0.5" data-two="1">A</option>
  <option value="R" data-one="0" data-two="1">R</option>
  <option value="U" data-one="0" data-two="1">U</option>
</select>

jquery

$(function(){
$('.selectElement').change(function () {
   var sV_Value = 10;
   var dV_Value = 20;

   var sV1 = sV_Value * $('#dropdown_serverVirtualisation').find('option:selected').data('one')
   var sV2 = sV_Value * $('#dropdown_serverVirtualisation').find('option:selected').data('two');

   var dV1 = dV_Value * $('#dropdown_desktopVirtualisation').find('option:selected').data('one')

   var dV2 = dV_Value * $('#dropdown_desktopVirtualisation').find('option:selected').data('two');

   var keyTechTotal1 = sV1 + dV1;
   var keyTechTotal2 = sV2 + dV2;

   var keyTechPercentage = (keyTechTotal1) / (keyTechTotal2) * 100
   if (keyTechTotal1 > 0) {
      var str = keyTechPercentage.toFixed(0) + "%";
   } else {
      var str = 0 + "%";
   }

   $('#keyTechTextBox').val(str);
});

 $('.selectElement').trigger('change'); //<---this if you need the % in page load to when N and N is selected
});

didn't change most of your calculatoin part...

updated fiddle

share|improve this answer
1  
wow jquery is amazing - thanks for that –  Singh May 15 at 19:19
 
welcome... happy coding... –  bipen May 15 at 19:23
 
actually i need some more help from you please :) - if that's okay? –  Singh May 15 at 19:24
 
yup!!! write it down... :) –  bipen May 15 at 19:34
1  
Three words: YOU ARE AWESOME! :) Best answer on stack overflow, I have ever got. Many thanks! –  Singh May 15 at 20:20
show 7 more comments

You could use custom attributes and more generic javascript to get the scalability required.

HTML:

<input type="text" id="resultBox" readonly="true" />
<select id="dropdown_test" onchange="calc()">
    <option m1="" m2="0" value="N">N</option>
    <option m1="1" m2="1" value="G">G</option>
    <option m1="0.3" m2="1" value="O">O</option>
    <option m1="0.5" m2="1" value="A">A</option>
    <option m1="0" m2="1" value="R">R</option>
    <option m1="0" m2="1" value="U">U</option>
</select>

javascript:

function calc() {
    var resultBox = document.getElementById('resultBox');
    var select1 = document.getElementById("dropdown_test");
    var select1_control = 10;
    var selected_option = select1.options[select1.selectedIndex];
    var m1 = selected_option.getAttribute("m1");        
    if (m1 == ""){
        var1 = null
    } else {
        var1 = select1_control * parseFloat(m1);
    }

    var m2 = selected_option.getAttribute("m2");
    if (m2 == ""){
        var2 = null
    } else {
        var2 = select1_control * parseFloat(m2);
    }

    resultBox.value = (var1 + var2);
}
share|improve this answer
 
thanks for your help –  Singh May 15 at 19:10
add comment

HTML:

<select id="dropdown_test" onchange="calc()">
    <option value="N" data-var1="null" data-var2="0">N</option>
    <option value="G" data-var1="1" data-var2="1">G</option>
    <option value="O" data-var1="0.3" data-var2="1">O</option>
    <option value="A" data-var1="0.5" data-var2="1">A</option>
    <option value="R" data-var1="0" data-var2="1">R</option>
    <option value="U" data-var1="0" data-var2="1">U</option>
</select>

Javascript:

function calc() {
    var resultBox = document.getElementById('resultBox');
    var select1 = document.getElementById("dropdown_test");
    var item = select1.options[select1.selectedIndex];
    var select1_control = 10;

    var var1 = item.getAttribute('data-var1');
    var var2 = item.getAttribute('data-var2');

    resultBox.value = parseFloat(var1) + (parseFloat(var2) * select1_control);
}

Demo

share|improve this answer
 
thanks for that - it works good –  Singh May 15 at 19:07
add comment

Without changing the HTML, you could refactor your javascript to:

function calc() {

     var SELECT1_CONTROL = 10;
     var matrix = {
         "N": [null, 0],
         "G": [1, 1],
         "O": [0.3, 1],
         "A": [0.5, 1],
         "R": [0, 1],
         "U": [0, 1]
     }

     var selectedValue = document.getElementById("dropdown_test").value;
     var var1 = SELECT1_CONTROL * matrix[selectedValue][0];
     var var2 = SELECT1_CONTROL * matrix[selectedValue][1];

     var resultBox = document.getElementById('resultBox');
     resultBox.value = (var1 + var2);
 }

or consider going down the data-annotations route as suggested by Ricardo

share|improve this answer
 
thanks a lot - so far this looks like what I was looking for :) –  Singh May 15 at 19:18
add comment

If you can change the HTML, I would simply add in some data attributes to make this much simpler. For instance:

<input type="text" id="resultBox" readonly="true" />
<select id="dropdown_test" onchange="calc()">
    <option data-val1="0" data-val2="0" value="N">N</option>
    <option data-val1="1" data-val2="1" value="G">G</option>
    <option data-val1="0.3" data-val2="1" value="O">O</option>
    <option data-val1="0.5" data-val2="1" value="A">A</option>
    <option data-val1="0" data-val2="1" value="R">R</option>
    <option data-val1="0" data-val2="1" value="U">U</option>
</select>

Then, you can simply use the selected option's values to compute your total:

function calc() {
    var select1_control = 10;
    var val1 = parseFloat(jQuery('#dropdown_test').find(':selected').data('val1'), 10);
    var val2 = parseFloat(jQuery('#dropdown_test').find(':selected').data('val2'), 10);
    jQuery('#resultBox').val((val1 * select1_control) + (val2 * select1_control));
}

Fiddle: http://jsfiddle.net/duffmaster33/z4Pfg/

share|improve this answer
 
thanks a lot :) –  Singh May 15 at 19:38
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.