Как задать класс кнопке, если введёныe данные отличаются от начальных значений

Question

Есть массив полей ввода и кнопка. Нужно сделать проверку, при событии input:

Если value хотя-бы одного поля отличается от изначального значения, то кнопке добавлялся один класс.
Если все поля имеют изначальное значение (которое приходит с backend-a), то чтобы добавлялся другой класс.

let profileInputs = document.querySelectorAll('.profile-input'),
  profileUpdateBtn = document.querySelector('.update-btn')

function checkUpdateData() {
  let inputsValuesArr = [
    nameFieldValue = document.querySelector('#name').value,
    surnameFieldValue = document.querySelector('#surname').value,
    emailFieldValue = document.querySelector('#email').value,
    phoneFieldValue = document.querySelector('#phone').value
  ];

  for (let i = 0; i < profileInputs.length; i++) {
    profileInputs[i].addEventListener('input', function() {
      if (inputsValuesArr[i] !== profileInputs[i].value) {
        profileUpdateBtn.classList.add('btn-primary');
        profileUpdateBtn.classList.remove('btn-disabled');
      } else {
        profileUpdateBtn.classList.remove('btn-primary');
        profileUpdateBtn.classList.add('btn-disabled');
      }
    });
  };
}

checkUpdateData();

<form class="checkout-form user-profile" action="{{isset($user) ? route('changeProfile') : ''}}" method="post" enctype="multipart/form-data">
  {{ csrf_field() }}
  <h2 class="subtitle-dark">@lang(env('GENERAL_TEMPLATE').'.personalDataText')</h2>

  {{--enterYourName--}}
  <div class="input-material">
    <input class="profile-input" type="text" id="name" name="name" placeholder="_" {!! isset($user) ? 'value="'.$user->name.'"' : '' !!} maxlength="100" required/>
    <span class="linea"></span>
    <label for="surname">@lang(env('GENERAL_TEMPLATE').'.enterYourName')</label>
  </div>

  {{--enterYourSurname--}}
  <div class="input-material">
    <input class="profile-input" type="text" id="surname" name="surname" placeholder="_" {!! isset($user) ? 'value="'.$user->surname.'"' : '' !!} maxlength="100" required/>
    <span class="linea"></span>
    <label for="surname">@lang(env('GENERAL_TEMPLATE').'.enterYourSurname')</label>
  </div>

  {{--enterYourEmail--}}
  <div class="input-material">
    <input class="profile-input" type="email" id="email" name="email" placeholder="_" {!! isset($user) ? 'value="'.$user->email.'"' : '' !!} required/>
    <span class="linea"></span>
    <label for="email">@lang(env('GENERAL_TEMPLATE').'.enterYourEmail')</label>
  </div>

  {{--phone--}}
  <div class="input-material">
    <input class="profile-input" type="tel" id="phone" class="phoneBox" name="phone" placeholder="_" {!! isset($user) ? 'value="'.$user->phone.'"' : '' !!} required/>
    <span class="linea"></span>
    <label for="phone">@lang(env('GENERAL_TEMPLATE').'.phone')</label>
  </div>

  <button type="submit" class="update-btn btn-disabled">@lang(env('GENERAL_TEMPLATE').'.updateBtn')</button>

</form>

Answer 1

const oForm = document.querySelector('.checkout-form.user-profile');
const aInputs = [...oForm.querySelectorAll('.profile-input')];
const oButton = oForm.querySelector('.update-btn');

oForm.addEventListener('input', function() {
  let aChanged = aInputs.filter(function(el) {
    return (el.getAttribute('value')) ? (el.value !== el.getAttribute('value')) : el.value;
  });
  // oButton.classList.toggle('btn-disabled', !aChanged.length);
  // Для наглядности переключаем "disabled"
  oButton.disabled = !(aChanged.length);
  
  // Также можно сразу подсвечивать поля с изменениями
  aInputs.forEach(el => {
    el.classList.toggle('changed', aChanged.includes(el));
  });
});

.changed { border-color: red; }

<form class="checkout-form user-profile" action="{{isset($user) ? route('changeProfile') : ''}}" method="post" enctype="multipart/form-data">
  {{ csrf_field() }}
  <h2 class="subtitle-dark">@lang(env('GENERAL_TEMPLATE').'.personalDataText')</h2>

  {{--enterYourName--}}
  <div class="input-material">
    <input class="profile-input" type="text" id="name" name="name" placeholder="_" value="MyName" maxlength="100" required/>
    <!-- Для примера, заменил подстановку на реальное значение -->
    <!-- {!! isset($user) ? 'value="'.$user->name.'"' : '' !!} -->

    <span class="linea"></span>
    <label for="surname">@lang(env('GENERAL_TEMPLATE').'.enterYourName')</label>
  </div>

  {{--enterYourSurname--}}
  <div class="input-material">
    <input class="profile-input" type="text" id="surname" name="surname" placeholder="_" {!! isset($user) ? 'value="'.$user->surname.'"' : '' !!} maxlength="100" required/>
    <span class="linea"></span>
    <label for="surname">@lang(env('GENERAL_TEMPLATE').'.enterYourSurname')</label>
  </div>

  {{--enterYourEmail--}}
  <div class="input-material">
    <input class="profile-input" type="email" id="email" name="email" placeholder="_" {!! isset($user) ? 'value="'.$user->email.'"' : '' !!} required/>
    <span class="linea"></span>
    <label for="email">@lang(env('GENERAL_TEMPLATE').'.enterYourEmail')</label>
  </div>

  {{--phone--}}
  <div class="input-material">
    <input class="profile-input" type="tel" id="phone" class="phoneBox" name="phone" placeholder="_" {!! isset($user) ? 'value="'.$user->phone.'"' : '' !!} required/>
    <span class="linea"></span>
    <label for="phone">@lang(env('GENERAL_TEMPLATE').'.phone')</label>
  </div>
  <button type="submit" class="update-btn btn-disabled" disabled>@lang(env('GENERAL_TEMPLATE').'.updateBtn')</button>
  <!-- Для наглядности добавил атрибут "disabled" -->

</form>

БЛОГ НА HUSL

Как задать класс кнопке, если введёныe данные отличаются от начальных значений

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