Change values based on selection

JavaScript
,
1

Hey everyone,

I have been racking my brain over this for far too long and decided to reach out for some help. I am creating a form that allows me to do a budgetary quote for network cabling. What I am trying to achieve is that when I select either Cat5e or Cat6 the price per run of cable changes. Here is my code below:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Budgetary Cabling Quote Form</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
  $(".input").keyup(function() {
    var val1 = +$(".value1").val();
    var val2 = +$(".value2").val();
    var val3 = +$(".value3").val();
    var one = val1 * 155;
    var two = val2 * 280;
    var three = val3 * 385;
    $("#result").val(val1 + val2 + val3);
    $("#result0").val(one + two + three);
  });
});
</script>

</head>

<body>
<form>
    <select name="category">
    	<option value="155|280|385">Cat5e</option>
    	<option value="177|310|420">Cat6</option>
    </select>
    <br>100ft<br>
    	<input type="text" class="input value1">
    <br>200ft<br>
    	<input type="text" class="input value2">
    <br>300ft<br>
    	<input type="text" class="input value3">
    <br>Total Lines<br>
    	<input type="text" disabled="disabled" id="result">
    <br>Total Price<br>
    	<input type="text" disabled="disabled" id="result0">
</form>
</body>
</html>
2

First, the prices need to change not only when keyup occurs, so move the code out to a separate function. Here I’ve called it updatePrice()

Second, place the prices in a data structure, to provide room for future expansion:

$(document).ready(function() {
  var price = {
    "cat5e": {
      "value1": 155,
      "value2": 280,
      "value3": 385
    }
  };
  function updatePrice() {
    var val1 = +$(".value1").val();
    var val2 = +$(".value2").val();
    var val3 = +$(".value3").val();
    var one = val1 * price["cat5e"].value1;
    var two = val2 * price["cat5e"].value2;
    var three = val3 * price["cat5e"].value3;
    $("#result").val(val1 + val2 + val3);
    $("#result0").val(one + two + three);
  }
  $(".input").keyup(updatePrice);
});

The "cat5e" part in the updatePrice() function can now be replaced with a variable, within which we retrieve the type of cable that is currently selected.

It’s not appropriate to store the prices within the dropdown values. The values are instead sent to the server so that it knows which type of cable has been selected.

    <select name="category">
    	<option value="cat5e">Cat5e</option>
    	<option value="cat6">Cat6</option>
    </select>

    var category = $("[name='category']").val();
    var one = val1 * price[category].value1;
    var two = val2 * price[category].value2;
    var three = val3 * price[category].value3;

Now you can add the cat6 prices to the data structure storing the amounts:

  var price = {
    "cat5e": {
      "value1": 155,
      "value2": 280,
      "value3": 385
    },
    "cat6": {
      "value1": 177,
      "value2": 310,
      "value3": 420
    }
  };

We can now also update the prices when the selected cabling changes, which is a good time to change the keyup event to using the standardised .on() method too:

  $(".input").on("keyup", updatePrice);
  $("[name='category']").on("change", updatePrice);

An example of the above code can be seen at http://codepen.io/pmw57/pen/OWPGQG

Currently the prices are embedded within the scripting code itself. A future improvement is to use an AJAX request to retrieve the prices from the server.

1 Like
3

Wow thank you so much for the quick reply!

Is there a way, that when a user has already entered the number of lengths required, and that they’ve changed their minds say from Cat6 and wish to select Cat5e that the price will change?

4

Yes, since I’ve fixed my spelling mistake from cabling to category, that works. Try the example again.

1 Like
5

Ahh yes, I see that it works now, in your example.

I have implemented it into my project but now everything does not seem to be updating as it was before…

Site: http://nettap.ca/cabling/test/

<div class="frm-row">
            <div class="section colm colm6">
                <label class="field select">
                  <select id="cable" name="cable">
                      <option value="">Cabling Type</option>
                      <option value="cat5e">Cat5e</option>
                      <option value="cat6">Cat6</option>
                  </select>
                  <i class="arrow double"></i>                   
                </label>
            </div><!-- end section -->
            
            <div class="section colm colm6">
                <label class="field prepend-icon">
                    <input type="text" name="100" id="100" class="gui-input input value1" placeholder="100ft">
                    <span class="field-icon"><i class="fa fa-bar-chart"></i></span>  
                </label>
                <label class="field prepend-icon">
                    <input type="text" name="200" id="200" class="gui-input input value2" placeholder="200ft">
                    <span class="field-icon"><i class="fa fa-bar-chart"></i></span>  
                </label>
                <label class="field prepend-icon">
                    <input type="text" name="300" id="300" class="gui-input input value3" placeholder="300ft">
                    <span class="field-icon"><i class="fa fa-bar-chart"></i></span>  
                </label>
            </div><!-- end section --> 
            
            <div class="section colm colm6">
                <label class="field prepend-icon">
                    <input type="text" name="result" id="result" class="gui-input" placeholder="Number of Drops">
                    <span class="field-icon"><i class="fa fa-bar-chart"></i></span>  
                </label>
            </div><!-- end section -->         
        </div><!-- end frm-row section --> 

$(document).ready(function() {
  var price = {
    "cat5e": {
      "value1": 155,
      "value2": 280,
      "value3": 385
    },
    "cat6": {
      "value1": 177,
      "value2": 310,
      "value3": 420
    }
  };
  function updatePrice() {
    var val1 = +$(".value1").val();
    var val2 = +$(".value2").val();
    var val3 = +$(".value3").val();
    var category = $("[name='cable']").val();
    var one = val1 * price[category].value1;
    var two = val2 * price[category].value2;
    var three = val3 * price[category].value3;
    $("#result").val(val1 + val2 + val3);
    $("#result0").val(one + two + three);
  }
  $(".input").on("keyup", updatePrice);
  $("[name='cable']").on("change", updatePrice);
});
6

The numbers look to be updating - what seems to be the problem there?

7

Because of the double “input” within the class the script was unable to function properly. I changed the “input value1” to “whoop value1” and the code worked perfectly.

Before

class="gui-input input value1"

After

class="gui-input whoop value1"

Thank you!

8

I know your issue is now solved. But I’m very interested - could somebody please explain why there would be a problem with having the two classes ‘gui-input’ and ‘input’? Why the conflict?

9

Would you have any idea why this script will not change the values if you use a mobile device? I have tried Android and iOS using Safari and Chrome.

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.