Hi, I'm making a form for sales. What I need is to know how I can prevent the user from typing numbers with the keyboard inside an input number, and that he can only increase the number by clicking on the arrows of 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.
It occurs to me that you could use
keydown()
it like this:Try the input property
ReadOnly
. This property is similar to thedisabled
, with the only exception that the inputs with the propertydisabled
are not sent with the form, while theReadOnly
, if they are sent as parameters of the form.