Works on a computer browser, but not in a mobile browser

JavaScript
1

Why does a script work in a browser on a computer, but not on a mobile browser? I have tried Chrome and Safari on the mobile devices. The code below:

$(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);
  }
  $(".whoop").on("keyup", updatePrice);
  $("[name='cable']").on("change", updatePrice);
});

<div class="frm-row">
    <div class="section colm colm6">
        Enter Number of Runs First
        <label class="field prepend-icon">
            <input type="text" name="100" id="100" class="gui-input whoop 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 whoop 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 whoop value3" placeholder="300ft">
            <span class="field-icon"><i class="fa fa-bar-chart"></i></span>  
        </label>
        <label class="field prepend-icon">
            <input type="text" name="result" id="result" class="gui-input" placeholder="Number of Drops" readonly="readonly">
            <span class="field-icon"><i class="fa fa-bar-chart"></i></span>  
        </label>
    </div><!-- end section -->
    
    <div class="section colm colm6">
    Select Category of Cable
        <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="result0" id="result0" class="gui-input" placeholder="Quote Estimate" readonly="readonly">
            <span class="field-icon"><i class="fa fa-male"></i></span>  
        </label>
    </div><!-- end section -->         
</div><!-- end frm-row section -->
2

Try put the following links in your head. Then test if it works on mobile.

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
3

Hi there mattepatten,

i do not use “jQuery” and do not use or own a “mobile device”,
but I have a sneaky suspicion that the “onchange event handler”
is not rendered at all by any “mobile device”

coothead

4

I placed the code in jsfiddle, with jQuery included as a library, with load type as nowrap in the body, and it works from my cellphone / mobile device. For the record it’s a Samsung Galaxy S5

5

It seems to work in ios also.

6

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