Блог

Главная - Вопросы по программированию - Включить кнопку отправки после добавления числа 2 и сравнения числа

Включить кнопку отправки после добавления числа 2 и сравнения числа

#javascript #jquery

#javascript #jquery

Вопрос:

Я пытаюсь включить кнопку отправки, в форме есть 3 поля, значение 1-го поля фиксировано, а добавление 2-го поля и 3-го поля сохраняется в 4-м поле. поле. Итак, что мне нужно, так это сравнить с 1-м числом и 3-м 4-м числом (добавление 2-го и 3-го), и если условие выполнено, то оно должно включить кнопку отправки, иначе кнопка должна быть отключена. Я проделал некоторую работу и не смог понять, чего мне не хватает. Пожалуйста, помогите мне в том же отношении.

Я добавил код JSfiddle, над которым я работаю:

 let $form = $('form');
let $first1 = $('#first1');
let $total1 = $('#total1');
let $total2 = $('#total2');
let $answer = $('#answer');
let $submitButton = $(':submit');

$form.on('submit', function(event) {
  let val1 = Number($first1.val());
  let val2 = Number($answer.val());
  if (val1 < val2) { // If condition is NOT met.
    event.preventDefault(); // Default submit from happening.
    return false; // Stop function.
  }
});

$form.on('input', function(event) {
  let val1 = Number($first1.val());
  let val2 = Number($answer.val());
  console.log(val1, val2)
  let isDisabled = val1 < val2; // Will return true or false.
  $submitButton.prop('disabled', isDisabled);
});

$form.on('input', function(event) {
  let val1 = Number($total1.val());
  let val2 = Number($total2.val());
  console.log(val1, val2)
  let number = parseInt($('#total1').val())   parseInt($('#total2').val());
  $('#answer').val(number);
    
});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form method="post" action="order.php">
  <label for="first1">Fixed Number</label>
  <input type="number" id="first1" value="10" />
  <br>
  <label for="total1">First Number</label>
  <input type="number" id="total1" class="change"/>
  <br>
  <label for="total2">Second Number</label>
  <input type="number" id="total2" class="change"/>
  <br>
  Answer = <input type="number" id="answer" name="answer" value=""/>
  <br>
  <input type="submit" value="submit" disabled title="Not Relevant">
</form>

Комментарии:

1. Будьте осторожны с порядком ваших обратных вызовов, вы сравниваете, затем добавляете, поэтому вы всегда сравниваете более старую версию. Также не нужно выполнять обратные вызовы, просто поместите весь код в один обратный вызов (после замены порядка)

Ответ №1:

Вы можете еще больше упростить свою функцию, объединив два input прослушивателя событий и поместив их в один. И прослушиватель submit событий тоже не нужен.

val1 и уже являются числами причиной того, что конструктор переносит функцию. val2 Number() $total1.val() Он делает то же самое, parseInt что и .

Добавьте val1 val2 и сохраните этот результат в новой вызываемой переменной total . Затем проверьте, total ниже или выше firstVal (фиксированное значение) и отключите или включите кнопку отправки.

Добавьте readonly атрибут к входным данным, которые вы не хотите изменять пользователем.

 let $form = $('form');
let $first1 = $('#first1');
let $total1 = $('#total1');
let $total2 = $('#total2');
let $answer = $('#answer');
let $submitButton = $(':submit');

$form.on('input', function(event) { // This function gets called every time you change the value in one of the inputs
  let firstVal = Number($first1.val()); // Get fixed number
  let val1 = Number($total1.val()); // Get 2nd field number
  let val2 = Number($total2.val()); // Get 3rd field number
  let total = val1   val2; // Add 2nd and 3rd field
  let isDisabled = total < firstVal; // If total is lower than fixed number, then is true, otherwise is false.
  $submitButton.prop('disabled', isDisabled); // Disable based on if isDisabled is true or false
  $answer.val(total); // Show the total
});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form method="post" action="order.php">
  <label for="first1">Fixed Number</label>
  <input type="number" id="first1" value="10" readonly/>
  <br>
  <label for="total1">First Number</label>
  <input type="number" id="total1" class="change"/>
  <br>
  <label for="total2">Second Number</label>
  <input type="number" id="total2" class="change"/>
  <br>
  <label for="answer">Answer</label>
  <input type="number" id="answer" name="answer" value="" readonly/>
  <br>
  <input type="submit" value="submit" disabled title="Not Relevant">
</form>