Как сделать неактивной кнопку отправки данных при изменении данных из формы

Question

Здравствуйте у меня есть форма в ней есть 3 строки первая строка уже заполнена данными из бд,как сделать так чтобы при изменении данных из первой строки кнопка отправки данных была в состоянии disable?!

Answer 1

Смотрите комментарии по коду

// получаем ссылку на кнопку
const btn = document.getElementById('btn')
// получаем ссылку на кнопку2
const btnInput = document.getElementById('btn2')
// получаем коллекцию строк с именем row1
const row1 = document.getElementsByName('row1')

// вешаем обработчик на первое поле с name = row1
row1[0].addEventListener('keyup', changeRow1)

// функция, которая проверяем изменение значения поля формы
function changeRow1(e) {
  btn.disabled = e.target.defaultValue !== e.target.value
  btnInput.disabled = e.target.defaultValue !== e.target.value
}

<form>
  <label>
    row 1
    <input type="text" name="row1" value="0">
  </label>
  <label>
    row 2
    <input type="text" name="row2">
  </label>
  <label>
    row 3
    <input type="text" name="row3">
  </label>
  <hr>
  <button id="btn" type="submit">
    Submit
  </button>

  <input id="btn2" type="submit" value="Submit">
</form>

Дополнение: добавьте в ваш код следующую функцию:

// функция для обработчика
function changeRow1(e) {
  const btn = document.getElementById('submit')
  btn.disabled = e.target.value !== e.target.defaultValue
}

затем на поля формы, которые появляются после выбора платежной системы повесьте этот обработчик:

if (ps == 'etps') {
 ...
 document.getElementById('yaninp').addEventListener('keyup', changeRow1);
}

...

if (ps == 'eps') {
...
document.getElementById('payeerinp').addEventListener('keyup', changeRow1);
}

и тогда, при условии, что кнопка Отправить имеет id="submit" функция changeRow1 при изменении значения в ваших полях для платежных систем, будет отключать возможность отправить форму.

Вот ваш пример без PHP (данные по умолчанию я изменил на 100 и 101 для наглядности):

function addfield(ps, name) {
  var el = document.getElementById('new');
  var el1 = document.getElementById('new1');
  var el2 = document.getElementById('new2');
  var el3 = document.getElementById('new3');
  if (el) {
    el.parentNode.removeChild(el);
  }
  if (el1) {
    el1.parentNode.removeChild(el1);
  }
  if (el2) {
    el2.parentNode.removeChild(el2);
  }
  if (el3) {
    el3.parentNode.removeChild(el3);
  }
  if (ps == 'eps') {
    var newTd = document.createElement('td');
    newTd['id'] = 'new';
    newTd.innerHTML = '<label class="form-control-label">Номер кошелька ' + name + ':</label><br>';
    paysys.insertBefore(newTd, paysys.children[0]);
    var newTd = document.createElement('td');
    newTd['id'] = 'new1';
    newTd.innerHTML = '<input class="form-control" id="payeerinp" type="text" name="row1" value="100" size="15"><input type="hidden" name="ps" value="' + name + '">';
    paysys.insertBefore(newTd, paysys.children[1]);
    min = 100;
    if (name == 'Яндекс') {
      min = 10;
    }
    document.getElementById('str_min').style.display = 'inline';
    document.getElementById('min').innerHTML = min;
    document.getElementById('name_ps').innerHTML = name;
    ///
    document.getElementById('payeerinp').addEventListener('keyup', changeRow1);
    ///
  }
  if (ps == 'etps') {
    var newTd = document.createElement('td');
    newTd['id'] = 'new';
    newTd.innerHTML = '<label class="form-control-label">Номер кошелька ' + name + ':</label><br>';
    paysys.insertBefore(newTd, paysys.children[0]);
    var newTd = document.createElement('td');
    newTd['id'] = 'new1';
    newTd.innerHTML = '<input class="form-control" type="text" name="purse" id="yaninp" value="101"  size="15"><input type="hidden" name="ps" value="' + name + '">';
    paysys.insertBefore(newTd, paysys.children[1]);
    min = 100;
    if (name == 'Яндекс') {
      min = 10;
    }
    // document.getElementById('yaninp').readOnly = true;
    document.getElementById('str_min').style.display = 'inline';
    document.getElementById('min').innerHTML = min;
    document.getElementById('name_ps').innerHTML = name;
    ///
    document.getElementById('yaninp').addEventListener('keyup', changeRow1);
    ///
  }
}

// функция для обработчика
function changeRow1(e) {
  const btn = document.getElementById('submit')
  btn.disabled = e.target.value !== e.target.defaultValue
}

<div class="popup-fade">
  <div class="popup">
    <a class="popup-close" href="#">Закрыть</a>

    <form action="" method="post">


      <table>

        <div class="selectPS" onclick="addfield('eps','Payeer');">
          <div class="imagesps" style="background: url(/img/pb_logo.png) no-repeat 50%;"></div>
          <label>PAYEER</label>
        </div>

        <div class="selectPS" onclick="addfield('etps','Яндекс');">
          <div class="imagesps" style="background: url(/img/ym_logo.png) no-repeat 50%;"></div>
          <label>Яндекс.Деньги</label>
        </div>
        <noscript>Включите Javascript в вашем браузере!</noscript>
        <br>
        <div id="str_min" style="display:none"><code>Минимальная сумма выплаты на <span id="name_ps"></span> составляет <span id="min"></span> Руб.</code></div><br>

        <div class="col-md-12">
          <div class="form-group">
            <tr>

              <div class="form-group col-md-12">
                <span id="paysys"></span>
              </div>
              <div class="form-group col-md-12">
                <label class="form-control-label">Сумма вывода:</label><input type="number" class="form-control" name="sum" id="sum" value="100" size="15" onkeyup="PaymentSum();"><br>
                <label class="form-control-label">Платежный пароль[указывается в профиле]:</label>
                <input type="password" class="form-control" name="paypass" size="15" /><br>


              </div>

          </div>
        </div>
        <div>
          <input type="submit" name="swap" id="submit" value="Выплатить" style="width: 100%;" class="btn btn-default btn-lg wow  animate__animated animate__zoomIn" data-wow-duration="2s">
        </div>
    </form>

БЛОГ НА HUSL

Как сделать неактивной кнопку отправки данных при изменении данных из формы

Ответы (1 шт):