JQuery get number input value as a number-CodePudding

Given a number input:

<input type="number" id="create-y-small" name="create-y-small" value="0">

How do I get the value of the input as a number? The following returns a string:

$("#create-y-small").val()

(Side question, why on earth is this the default behavior? Surely one should expect a number type input to give a number?)

I've looked for answers elsewhere but no luck:

Input value is a string instead of a number Answers use parsing to parse to a number. I don't want to parse to a number I just want to get the number as a number.

Get variable value from input number OP seemed happy to get the value as a string

Get the value of a input number in jQuery Same story

https://www.codegrepper.com/code-examples/javascript/how to get the value of input number using jquery Same story

CodePudding user response：

all input element in html return string as their value. if you want the result in int , you have to convert it.

parseInt($("#create-y-small").val())

CodePudding user response：

You can use jquery's valHooks to change how jquery returns values.

$.valHooks.number = {
  get: function( elem ) {
    return elem.value * 1;
  }
};

you only need to do this once in your code and then all type=number inputs will instead return a number.

console.log(
  "num is a string",
  $("#num").val() === "1", 
  $("#num").val() === 1, 
  $("#txt").val() === "1",
  $("#txt").val() === 1)

$.valHooks.number = {
  get: function( elem ) {
    return elem.value * 1;
  }
};

// confirm no neffect on type='text'
console.log(
  "num is a number",
  $("#num").val() === "1", 
  $("#num").val() === 1, 
  $("#txt").val() === "1",
  $("#txt").val() === 1)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='number' id='num' value="1">
<input type='text' id='txt' value="1">