How to show blank instead of 0 in a numeric input element

Question

HTML numeric input in form is defined as

@Html.TextBoxFor(m => Model.Products[i].Soodkogus,
     new { type = "number", min = 0, @class = "quantity" })

This produces input boxes with content 0.

How to make the input box blank if its value is 0? Only non-zero values should shown.

This is an ASP.NET 6 MVC Razor application. jQuery and Bootstrap 5 are used.

`0` is `0` and not `""`. The latter means "no value", whereas `0` is a valid value. Hence why would you want the described behaviour? — connexo, Mar 28 '22 at 10:33
This is order quantity entry form. Initial value should be empty, not 0. — Andrus, Mar 28 '22 at 10:34
I don't know about MS stuff, but I'd expect something along the lines of `new { type = "number", min = 0, @class = "quantity", value = "" })`. Did you try that? — connexo, Mar 28 '22 at 10:36

score 3 · Accepted Answer · answered Mar 28 '22 at 10:34

I don't know what your framework is doing in background when generating this input fields, but if you just want to achieve this logic with jQuery - something like this should work.

$(document).ready(function(){
  $('input').val("");
  $('input').on('input',function(){
    if($(this).val() < 1)
    {
      $(this).val("");
    }
  });
});

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<input type="number" min="0">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

How to show blank instead of 0 in a numeric input element

1 Answers1