Hi, I'm making a sales form. What I need is to know how I can prevent the user from entering numbers with the keyboard in an input number, and that he can only increase the number by clicking on the arrows in the input itself.
This is the code:
$(".btn_add").on("click", function() {
var column1 = $(this).closest('tr').children()[0].textContent;
var column2 = $(this).closest('tr').children()[1].textContent;
var column4 = $(this).closest('tr').children()[3].textContent;
var column5 = $(this).closest('tr').children()[4].textContent;
if($("#second_table .copy_"+column1).length == 0)
{
$("#second_table").append("<tr class='copy_"+column1+"'><td>" + column1 + "</td><td>" + column2 + "</td><td>" + column4 + "</td><td>" + column5 + "</td><td><input type='number' class='entrada' min='0'></td><td>--</td><td><button class='btn btn-danger btn_remove'>- Remove</button></td></tr>");
}
});
$("#second_table").on("input", "input", function() {
var input = $(this);
var columns = input.closest("tr").children();
var price = columns.eq(3).text();
var calculated = input.val() * price;
columns.eq(5).text(calculated);
});
$("body").on("click",".btn_remove", function() {
$(this).parent().parent().remove();
});<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table id="first_table" class="table table-bordered">
<thead>
<tr>
<th># Code</th>
<th>Product</th>
<th>Category</th>
<th>Stock</th>
<th>Price</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Monitor A</td>
<td>X</td>
<td>5</td>
<td>7.5</td>
<td>
<button class="btn btn-info btn_add">+ Add</button>
</td>
</tr>
<tr>
<td>2</td>
<td>Mouse B</td>
<td>X</td>
<td>5</td>
<td>12.4</td>
<td>
<button class="btn btn-info btn_add">+ Add</button>
</td>
</tr>
<tr>
<td>3</td>
<td>Keyboard D</td>
<td>X</td>
<td>8</td>
<td>22.35</td>
<td>
<button class="btn btn-info btn_add">+ Add</button>
</td>
</tr>
<tr>
<td>4</td>
<td>Motherboard C</td>
<td>Y</td>
<td>14</td>
<td>50</td>
<td>
<button class="btn btn-info btn_add">+ Add</button>
</td>
</tr>
</tbody>
</table>
<br>
<table id="second_table" class="table table-bordered table-hover">
<thead>
<tr>
<th># Code</th>
<th>Product</th>
<th>Stock</th>
<th>Price</th>
<th>Input</th>
<th>Calculated Field</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div class="form-group col-sm-4">
<label for="igv">IGV:</label>
<input type="text" class="form-control"disabled id="igv">
</div>
<div class="form-group col-sm-4">
<label for="total">SubTotal:</label>
<input type="text" class="form-control" disabled id="total">
</div>
<div class="form-group col-sm-4">
<label for="totaltotal">Total:</label>
<input type="text" class="form-control" disabled id="totaltotal">
</div>Thanks in advance.