How to get an input value of input type number?

Question

I've got a number field in my form which one can input a score here:

<input type="number" min="0" max="100" class="form-control" name="total_score" id='total_score' value="<?php echo $total_score;?>" >(Please enter a score from 0-100)

And before the form is submit, I need to check whether this field is filled. I'd not like to use the required since I don't want to block the user when they need more time to decide the input score.

I tried to catch the value of total score with:

                var score  = document.getElementsById("total_score").value;
                if(score==null){
                    alert("no score");
                }

But seems not working. Any Ideas? Thanks.

*" I'd not like to use the required since I don't want to block the user when they need more time to decide the input score."* That seems odd, this is exactly what `required` is for. It will only prevent form submission, not tabbing around the fields and such. — T.J. Crowder, Aug 05 '18 at 08:57
I assume the `getElementsById` is a typo, and your real code has `getElementById` (no `s`). — T.J. Crowder, Aug 05 '18 at 09:01
@T.J.Crowder Yes, it sounds wierd. But since I've also got a button for save the form temporarily, which allows the users to leave some fields be blank. This is why I 'd not like to use required for this form. — Lykas, Aug 05 '18 at 09:09
@T.J.Crowder It's really my bad to misuse getElementById with getElementsByName. Thanks for pointing it out! ;) — Lykas, Aug 05 '18 at 09:10

score 1 · Answer 1 · answered Aug 05 '18 at 08:57

1

value will never be null because it's always a string. You could use

var score  = document.getElementsById("total_score").value.trim();
if (!score) {
    alert("no score");
}

...since any non-blank string (including "0") will be truthy.

Once you'e determined there's a value there, you can either convert it to number yourself (my answer here has several options) or use the valueAsNumber property of the input.

Note: String#trim was added in ES2015 so it won't exist in obsolete browsers like IE8 unless you polyfill it.

Side note: I assume the getElementsById in your question is a typo, and your real code has getElementById (no s).

answered Aug 05 '18 at 08:57

T.J. Crowder

1,031,962
187
1,923
1,875

When I print the variable score on the screen, it seems that the system does't even catch that element. :( – Lykas Aug 05 '18 at 09:02
@Lykas - Look in the web console, are you getting some kind of error? (Did you see the note about the error in `getElementById`?) – T.J. Crowder Aug 05 '18 at 09:04
Thanks! It's really the typo mistake, I misused with getElementsByName ;( – Lykas Aug 05 '18 at 09:07
@Lykas - Glad that helped. :-) The `null` thing was also an issue (since `"" == null` is `false`). – T.J. Crowder Aug 05 '18 at 09:08
@ T.J. Crowder May I clarify one thing? Is `if(!score)` this equal to `if(score=="")` ? – Lykas Aug 05 '18 at 09:37
1

@Lykas - Not in the general case, but it is if you know `score` is a string. All non-blank strings are *truthy* (they convert to `true` when used as a boolean); a blank string is *falsy* (it converts to `false` when used as a boolean). Just FYI, the falsy values are `""`, `0`, `NaN`, `null`, `undefined`, and of course, `false`. All other values (including `"0"`) are truthy. – T.J. Crowder Aug 05 '18 at 09:41

score 1 · Answer 2 · answered Aug 05 '18 at 12:03

Lets describe this problem in details. We always need to understand problem the under the hood that we can solve all similar problems.

<div class="score-field">
    <label for="total_score">(Please enter a score from 0-100)</label>
    <input 
      type="number"
      id="total_score"
      name="total_score" 
      min="0" 
      max="100" 
      value="<?php echo $total_score;?>">
</div>

If we want to grab the value document.getElementById('total_score').value. It return a String type of value.

let value = document.getElementById('total_score').value;
console.log(typeof value) //'String'

So a String type of value never be null

let value = '';
console.log(value == null) //false

Enough discussion, Right?

Lets solve the problem.

const score = parseFloat(document.getElementById('total_score').value);

Its convert the value String to Number.

Suppose

parseFloat("100"); // 100
parseFloat(''); //NaN

We can check is value really a number or not.

isNaN(value); // return true or false

I think, here is your problem solve.

Full solve:

HTML:

<div class="score-field">
        <label for="total_score">(Please enter a score from 0-100</label>
        <input 
          type="number"
          id="total_score"
          name="total_score" 
          min="0" 
          max="100">
</div>

JS:

const score = parseFloat(document.getElementById("total_score").value);

if(isNaN(score)){
   alert("no score");
}

score 0 · Answer 3 · answered Aug 05 '18 at 08:58

0

Does this work:

            if(isNaN(parseInt(score))){
                alert("no score");
            }

answered Aug 05 '18 at 08:58

Nathan Stockton

292
1
5

score 0 · Answer 4 · answered Aug 05 '18 at 09:17

This should work:

// first get the element
let element = document.getElementById('myInput');

// get the value property of the element
console.log(element.value);

//we could do a check the following way:

function change() {
  if (element.value > 100) {
    console.log('value too big');
  }

  if (element.value < 5) {
    console.log('value too small');
  }
}

<input type="number" value=5 id="myInput" oninput="change()"/>

How to get an input value of input type number?

4 Answers4