Skip to content

How to make only one integer can be written in the box?

I want to make only 1 number can be written in the box (maximum is number 8). Is there anyway to do that?

<label class="control-label col-sm-4" for="seal_qty">Seal Quantity:</label>
      <div class="col-sm-4">
        <p class="form-control-static" style="margin-top: -6px;">
            <input type="number" class="form-control" id="seal_qty" name="seal_qty" min="1" max="8" placeholder="Enter Seal Quantity" value="<?php echo $seal_qty; ?>">
        </p>
      </div>
      <div class="col-sm-10"></div>

var seal_qty = document.translot.seal_qty.value;
    if (seal_qty == null || seal_qty ==""){
        alert("Seal Quantity should not be blank.");
        return false;
    }

Advertisement

Answer

You can check lenght and number like:

const seal_qty = document.querySelector('#seal_qty');
seal_qty.addEventListener('change', (e) => {
  const input = e.target;
  const value = parseInt(input.value);
  if(value.length > 1 || value > 8){
    input.value = '';
    alert("maximum is 8.");
  }
});
<label class="control-label col-sm-4" for="seal_qty">Seal Quantity:</label>
<div class="col-sm-4">
  <p class="form-control-static" style="margin-top: -6px;">    
    <input type="number" class="form-control" id="seal_qty" name="seal_qty" min="1" max="8" placeholder="Enter Seal Quantity">
    
  </p>
</div>
<div class="col-sm-10"></div>