Сравнение значений двух форм HTML с использованием JavaScript

Question

У меня есть две отдельные формы, которые имеют идентичные атрибуты. Есть ли красноречивый способ сравнить их значения на эквивалентность, используя JS / Jquery?

$('#form1').context.forms[0] === $('#form2').context.forms[0], кажется, работает, но мне интересно, если есть лучший способ.

Я используя spring / thymeleaf для генерации содержимого форм.

Answer 1

В вашем примере context - это целое document, поскольку это значение по умолчанию, когда вы не передаете аргумент context в $(selector, context). Итак, ваш код в основном делает это:

document.forms[0] === document.forms[0] // Always true

Если вы хотите сравнить значения полей в этих формах, вы можете использовать .serialize():

$('#form1').serialize() === $('#form2').serialize() // Implies fields are in the same order

Демо

$('button').click(function() {
  var identical = $('#form1').serialize() === $('#form2').serialize();
  alert(identical ? "Values are identical" : "Values are NOT identical");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="form1">
  <label>Name</label>
  <input name="name">
  <label>
    <input type="checkbox" name="accepts_tou">
    Do you accept out Terms of use?
  </label>
</form>
<form id="form2">
  <label>Name</label>
  <input name="name">
  <label>
    <input type="checkbox" name="accepts_tou">
    Do you accept out Terms of use?
  </label>
</form>

<button>Compare</button>