locked
apply value on input using Jquery RRS feed

  • Question

  • User-2057987289 posted
    <div id="keypad" style="; 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', 'true');" />
            <area shape="rect" coords="145,25,265,166" onclick="applyValue('2', 'true');" />
            <area shape="rect" coords="270,25,390,166" onclick="applyValue('3', 'true');" />
            <area shape="rect" coords="20,166,140,303" onclick="applyValue('4', 'true');" />
            <area shape="rect" coords="145,166,265,303" onclick="applyValue('5', 'true');" />
            <area shape="rect" coords="270,166,390,303" onclick="applyValue('6', 'true');" />
            <area shape="rect" coords="20,302,140,443" onclick="applyValue('7', 'true');" />
            <area shape="rect" coords="145,302,265,443" onclick="applyValue('8', 'true');" />
            <area shape="rect" coords="270,302,390,443" onclick="applyValue('9', 'true');" />
            <area shape="rect" coords="145,442,265,587" onclick="applyValue('0', 'true');" />
            <area shape="rect" coords="20,442,140,587" onclick="applyValue('backspace', 'true');" />
            <area shape="rect" coords="270,442,390,587" onclick="applyValue('clear', 'true');" />
          </map>
    </div>


    // Append a keypad value to the current textbox 
    function applyValue(value, phoneNum)
    {
      var currField = document.forms[0].elements[0];
      if (value == "backspace") {
        if (isNaN(currField.value.charAt(currField.value.length - 1))) {
      	  currField.value = currField.value.substring(0, currField.value.length - 2);
        }
        else {
      	  currField.value = currField.value.substring(0, currField.value.length - 1);
      	}
      } else if (value == "clear") {
        currField.value = "";
      } else {
        if (phoneNum == "true") {
        	var length = currField.value.length;
          if (length < 13) {
       		switch (length) {
          	  case 0: 
                currField.value = "(" + value;
                break;
          	  case 3:
                currField.value += value + ")" ;
                break;
              case 7:
                currField.value += value + "-" ;
                break;
              default:
                currField.value += value;
                break;
       		}     
          } 
        }
        else {
          if (length < 8) {
            currField.value += value;
          }
        }
      }
      
      
    }
    <form:form name="phoneForm" action="phoneTracking.do" method="POST">
            <jsp:include page="keypadPhoneNum.jsp" />
            <input id="phoneNumber" name="phoneNumber" type="text" />
            
    I have keypad page to apply the vale in a text input, with simple JS code Or Jquery, I've tried this code out, but didn't work

    any advise?
    Tuesday, April 5, 2016 1:39 PM

Answers

  • User61956409 posted

    Hi samarland,

    It needs to set the input to the value you have calculated at the end :/

    It seems that you’d like to assign value to input, if that is the case, you could refer to the following code.

    $('#number').val(valueOfInput);

    For more information about jQuery val() method, please check this link.

    http://www.w3schools.com/jquery/html_val.asp

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, April 8, 2016 8:42 AM

All replies

  • User61956409 posted

    Hi samarland,

    Firstly, please make sure whether function applyValue(value, phoneNum) could be called. And please debug you code to trace the changes of variables (such as currField) and check whether any error appear in Console tab.

    Best Regards,

    Fei Han

    Wednesday, April 6, 2016 3:10 AM
  • User-2057987289 posted

    No errors on console, the value is passing correctly.

    Last code updated:

    // Append a keypad value to the current textbox 
    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;
        }
      }
    }

    Wednesday, April 6, 2016 7:18 PM
  • User-2057987289 posted

    All the values are passing correctly through the Js file, just not applying the value on number textinput.

    Wednesday, April 6, 2016 7:20 PM
  • User-2057987289 posted

    It needs to set the input to the value you have calculated at the end :/

    My bad, thank though :)

    Wednesday, April 6, 2016 7:39 PM
  • User61956409 posted

    Hi samarland,

    It needs to set the input to the value you have calculated at the end :/

    It seems that you’d like to assign value to input, if that is the case, you could refer to the following code.

    $('#number').val(valueOfInput);

    For more information about jQuery val() method, please check this link.

    http://www.w3schools.com/jquery/html_val.asp

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, April 8, 2016 8:42 AM