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