Assign javascript variables using html select options

javascript jquery html math select

12,056

Solution 1

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

Solution 2

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);
}

Solution 3

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

Solution 4

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/

Solution 5

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

View more solutions

12,056

Author by

Singh

I come from a science background. However, I eventually realised I like IT more. Now I am studying computer science and programming is really hard but I am enjoying it a lot.

Updated on June 05, 2022

Comments

Singh almost 2 years

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 :)