Allow only input of an input type="number"

Question

Allow only input of an input type="number"

Navigation

#1 by (2 votes)
#2 by (2 votes)
#3 by (2 votes)

1

Search by tutos and I did not find anything, someone went through this?

<div class="row">
    <div class="col-md-2">
        Valor:<br />
        <input type="number" class="form-control" id="txtvalor" value="0" Placeholder="Valor" />
    </div>
    <div class="col-md-2">
        Porcentaje:<br />
        <input type="number" class="form-control" id="txtporcentaje" value="0" placeholder="Porcentaje" />
    </div>
    <div class="col-md-2" style="vertical-align:bottom">
        <button type="submit" class="btn btn-primary" id="btngravadescuentos"> Cargar </button>
    </div>
</div>

When you press load you have to validate if it is full one, if none is full it makes me a required and if I want to fill in both you do not have to let me fill in.

I accept any suggestion

I ARRIVE THIS

1.- Select Discount is by default and is an empty value - a required if I press the "Select a discount" button

2.- a required if you press the button and the percentage or fields are not filled value

3.- a message (not alert) that says just fill a field "value or percentage"

javascript jquery html

asked by Rodrigo Rodriguez 11.01.2018 в 21:13

source

3 answers

2

The script would be something like this:

        <script type="text/javascript">
            $(document).ready(function () {
            $("#btngravadescuentos").on('click',function(){
                let campo1=$("#btngravadescuentos").val();
                let campo2=$("#btngravadescuentos").val();
                if(campo1.length<1 && campo2.length<1){
                    //Acciones para vallidar
                    alert("Debe llenar algún campo");
                }else if(campo1.length>0 && campo2.length>0){
                    //Acciones para vallidar
                    alert("solo debe llenar un campo");
                }else{
                   //Acción por defecto
                }
            });
        });

        </script>

answered by 11.01.2018 в 21:27

2

You can disable the other input when you fill one of them.

On the button you simply have to check that the two are not empty:

$(function(){
  $('#txtporcentaje').change(function(){
    var tieneValor = $(this).val() !== '';
    $('#txtvalor').prop('disabled', tieneValor);
  });
  $('#txtvalor').change(function(){
    var tieneValor = $(this).val() !== '';
    $('#txtporcentaje').prop('disabled', tieneValor);
  });
  $('#btngravadescuentos').click(function(){
    return $('#txtvalor').val() !== ''
      || $('#txtporcentaje').val() !== '';
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-md-2">
        Valor:<br />
        <input type="number" class="form-control" id="txtvalor" Placeholder="Valor" />
    </div>
    <div class="col-md-2">
        Porcentaje:<br />
        <input type="number" class="form-control" id="txtporcentaje" placeholder="Porcentaje" />
    </div>
    <div class="col-md-2" style="vertical-align:bottom">
        <button type="submit" class="btn btn-primary" id="btngravadescuentos"> Cargar </button>
    </div>
</div>

answered by 11.01.2018 в 21:32

Chrome shows absolutely nothing [duplicated] Move from String to Double avoiding Null error and Malformato in Java

score 2 · Accepted Answer

How about if you try to use jquery and change the logic that if the user wants to enter more than one textbox, the other one is cleaned? and with regard to what is required you can also use jquery and its validate plugin plugin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div class="row">
        <div class="col-md-2">
            Valor:<br />
            <input type="number" class="form-control" id="txtvalor" value="0" Placeholder="Valor" />
        </div>
        <div class="col-md-2">
            Porcentaje:<br />
            <input type="number" class="form-control" id="txtporcentaje" value="0" placeholder="Porcentaje" />
        </div>
        <div class="col-md-2" style="vertical-align:bottom">
            <button type="submit" class="btn btn-primary" id="btngravadescuentos"> Cargar </button>
        </div>
    </div>
</body>
<script>
    $(document).ready(function() {
        $("#txtvalor").on("keypress", function() {
            $("#txtporcentaje").val("");
        });
        $("#txtporcentaje").on("keypress", function() {
            $("#txtvalor").val("");
        });
    });
</script>
</html>