VAlue not apply on input using Jquery code

Question

I'm trying to apply the value of image map using applyValue function. I don't have any errors shown on console, but the value isn't applying on the input.

When I debugged the JS file, the value was passing correctly,

<script type="text/javascript"
    src="/web/static/js/jquery-1.10.2.min.js"></script>
<script src="web/static/js/keypadControl.js" type="text/javascript"></script>
<div id="keypadDiv" style="position:absolute; top:80px; left:575px; z-index:3;">

  <img src="web/static/media/images/keypad.jpg" width="413" height="608" usemap="#keypad" border="0">
  <map name="keypad" id="keypad">
    <area shape="rect" coords="20,25,140,166" onclick="applyValue('1', 'false');" />
    <area shape="rect" coords="145,25,265,166" onclick="applyValue('2', 'false');" />
    <area shape="rect" coords="270,25,390,166" onclick="applyValue('3', 'false');" />
    <area shape="rect" coords="20,166,140,303" onclick="applyValue('4', 'false');" />
    <area shape="rect" coords="145,166,265,303" onclick="applyValue('5', 'false');" />
    <area shape="rect" coords="270,166,390,303" onclick="applyValue('6', 'false');" />
    <area shape="rect" coords="20,302,140,443" onclick="applyValue('7', 'false');" />
    <area shape="rect" coords="145,302,265,443" onclick="applyValue('8', 'false');" />
    <area shape="rect" coords="270,302,390,443" onclick="applyValue('9', 'false');" />
    <area shape="rect" coords="145,442,265,587" onclick=" applyValue('0', 'false');" />
    <area shape="rect" coords="20,442,140,587" onclick="applyValue('backspace', 'false');" />
    <area shape="rect" coords="270,442,390,587" onclick="applyValue('clear', 'false');" />
  </map>
</div>

JS file: keypadControl.js

function applyValue(value, phoneNum)
{
var currField = $('#number')
var valueOfInput = currField.val();
  if (value == "backspace") {
    if (isNaN(valueOfInput.charAt(valueOfInput.length - 1))) {
      valueOfInput = valueOfInput.substring(0, valueOfInput.length - 2);
    }
    else {
      valueOfInput = valueOfInput.substring(0, valueOfInput.length - 1);
    }
  } else if (value == "clear") {
    valueOfInput = "";
  } else {
    if (phoneNum == "true") {
        var length = valueOfInput.length;
      if (length < 13) {
        switch (length) {
          case 0: 
            valueOfInput = "(" + value;
            break;
          case 3:
            valueOfInput += value + ")" ;
            break;
          case 7:
            valueOfInput += value + "-" ;
            break;
          default:
            valueOfInput += value;
            break;
        }     
      } 
    }
    else {
        valueOfInput += value;
    }
  }
}

the field that I want to apply the value to.

<input id="number" name="number" type="text" class="numClass" />

. . . .

All the values are passing correctly through the Js file, just not applying the value on number textinput. — Samarland
– Samarland, Commented Apr 6, 2016 at 19:21

steve v · Accepted Answer · 2016-04-06 19:24:26Z

Your function needs to set the input to the value you have calculated at the end.

function applyValue(value, phoneNum)
{
var currField = $('#number')
var valueOfInput = currField.val();
  if (value == "backspace") {
    if (isNaN(valueOfInput.charAt(valueOfInput.length - 1))) {
      valueOfInput = valueOfInput.substring(0, valueOfInput.length - 2);
    }
    else {
      valueOfInput = valueOfInput.substring(0, valueOfInput.length - 1);
    }
  } else if (value == "clear") {
    valueOfInput = "";
  } else {
    if (phoneNum == "true") {
        var length = valueOfInput.length;
      if (length < 13) {
        switch (length) {
          case 0: 
            valueOfInput = "(" + value;
            break;
          case 3:
            valueOfInput += value + ")" ;
            break;
          case 7:
            valueOfInput += value + "-" ;
            break;
          default:
            valueOfInput += value;
            break;
        }     
      } 
    }
    else {
        valueOfInput += value;
    }
  }
  currField.val(valueOfInput);
}

Collectives™ on Stack Overflow

VAlue not apply on input using Jquery code

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related