Question

在输入标签“提交”按钮中添加oninput之前可以正常使用，但是在将其与function box1(),box2(),box()中的JavaScript添加之后，则无法使用。我在后端使用了java，在前端使用了HTML的Bootstrap。我已经在底部用CSS，JavaScript，jquery包含了所有引导URL。我想在用户输入其完整的输入值后调用JavaScript函数，这就是为什么我在oninput标记内使用了input的原因。解决办法是什么。

<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>

Answer 1

也许您忘记了</form>结束标记

Answer 2

这是您的代码正在运行。我只关闭前四个<div>，<form>并移动<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");
  }
}

<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>
          
           <br>

          <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>
          
          <br>
          <button type="submit" class="btn btn-outline-warning">Submit</button>
          <br>

        </div>
      </div>
    </div>
  </div>
</form>

将oninput添加到输入标签

2 个答案: