Отправить не работает после добавления входного тега ввода - PullRequest
0 голосов
/ 19 сентября 2018

Перед добавлением oninput во входной тег кнопка отправки работала нормально, но после добавления ее и function box1(),box2(),box() из JavaScript она не работает.Я использовал java в бэкэнде и Bootstrap с HTML в бэкэнде.Я уже включил все URL начальной загрузки внизу: CSS, JavaScript, jquery.Я хочу вызвать функцию 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>

Ответы [ 2 ]

0 голосов
/ 19 сентября 2018

Вот ваш код работает.Я закрываю только первые 4 <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>
0 голосов
/ 19 сентября 2018

возможно вы забыли закрывающий тег </form>

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...