Before adding oninput in input tag submit button was working fine but after adding it and function box1(),box2(),box() of JavaScript, it is not working. I used the java at back-end and Bootstrap with HTML at front-end. I already included all the bootstrap url at bottom with CSS, JavaScript, jquery. I want to call JavaScript function after user input its complete input value that's why i used the oninput inside input tag. What is the solution.
<form action="Emicalculator" method="post">
<div class="container">
<div class="row">
<div class="col-lg-6 col-lg-12 ">
<div class="jumbotron">
<h1 class="text-center">EMI Calculator</h1>
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary" class="nav-collapse">Home Loan</button>
<button type="button" class="btn btn-secondary collapse.in" class="nav-collapse">Personal Loan</button>
<button type="button" class="btn btn-secondary collapse.in" class="nav-collapse">Car Loan</button>
</div>
<div class="form-group">
<label class="control-label" id="home" for="Loan Amount">Home Loan Amount </label>
<input type="number" name="loanamount" min="0" max="20000000" maxlength="8" oninput="box1()" id="input1" class="form-control" class="home1" placeholder="Enter loan amount" required>
<small id="emailHelp" class="form-text text-muted">min=0, max=200L</small>
</div>
<div class="form-group">
<label class="control-label" for="Interest Rate">Interest Rate </label>
<input type="number" name="interest_rate" min="5" max="20" maxlength="2" oninput="box2()" id="input2" class="form-control" placeholder="Enter Interest Rate" required>
<small id="emailHelp" class="form-text text-muted">min=5, max=20</small>
</div>
<div class="form-group">
<label class="control-label" for="Loan Tenure">Loan Tenure </label>
<input type="number" name="loan_tenure" min="0" max="30" maxlength="2" oninput="box3()" id="input3" class="form-control" placeholder="Enter Loan Tenure" required>
<small id="emailHelp" class="form-text text-muted">min=0, max=30</small>
</div>
</div>
<button type="submit" class="btn btn-outline-warning">Submit</button>
<br>
<script>
function box1() {
var check = parseInt((document.getElementById('input1').value));
if ((check < 0) || (check > 20000000)) {
alert("Please enter in range between 0 to 20000000");
}
}
function box2() {
var check = parseInt((document.getElementById('input2').value));
if ((check < 5) || (check > 20)) {
alert("Please enter in range between 5 to 20");
}
}
function box3() {
var check = parseInt((document.getElementById('input3').value));
if ((check < 0) || (check > 30)) {
alert("Please enter in range between 0 to 30");
}
}
</script>