Получить количество входов в форму с разными именами, используя jquery

Как получить количество входов в форму, используя jquery чтобы каждая группа с другим именем рассматривалась как один элемент? Например, для формы ниже, мы должны получить 4:

<form>
    <input type="text" name="textField">
    <input type="checkbox" name="checkboxField">
  <div>
    <input type="radio" name="radioField" value="one">
    <input type="radio" name="radioField" value="two">
    <input type="radio" name="radioField" value="three">
  </div>
  <div>
    <input type="radio" name="radioField2" value="four">
    <input type="radio" name="radioField2" value="five">
  </div>
</form>

Я попробовал этот метод и ищу другой и, возможно, более оптимальный:

const fieldsName = [];
$('form :input').each(function(index, item) {
  fieldsName.push(item.name)
});

let uniqueFieldsName = [];

$.each(fieldsName, function(index, item) {
  if ($.inArray(item, uniqueFieldsName) === -1) {
    uniqueFieldsName.push(item);
  }
});

let itemsCount = uniqueFieldsName.length;
console.log(itemsCount);
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>

<form>
  <input type="text" name="textField">
  <input type="checkbox" name="checkboxField">
  <div>
    <input type="radio" name="radioField" value="one">
    <input type="radio" name="radioField" value="two">
    <input type="radio" name="radioField" value="three">
  </div>
  <div>
    <input type="radio" name="radioField2" value="four">
    <input type="radio" name="radioField2" value="five">
  </div>
</form>

Всего 2 ответа


Ты можешь использовать:

const names = $('[name]').map(function() {return this.name;});
const distinct = [...new Set(names)];
console.log(distinct.length);

DEMO:

const names = $('[name]').map(function() {return this.name;});
const distinct = [...new Set(names)]
console.log(distinct.length)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
    <input type="text" name="textField">
    <input type="checkbox" name="checkboxField">
  <div>
    <input type="radio" name="radioField" value="one">
    <input type="radio" name="radioField" value="two">
    <input type="radio" name="radioField" value="three">
  </div>
  <div>
    <input type="radio" name="radioField2" value="four">
    <input type="radio" name="radioField2" value="five">
  </div>
</form>

Объяснение:

  • $('[name]') - Получить все элементы, имеющие атрибут name.
  • .map(function() {return this.name;}); - использование метода .map() возвращает новый массив имен из всех найденных выше элементов.
  • [...new Set(names)] - Получить разные имена из массива выше.
  • distinct.length возвращает количество входов формы с разными именами

Вы можете использовать ниже данный метод:

function getRadioValue(id) {
    var ele = document.getElementsByName(id);
    for (i = 0; i < ele.length; i++) {
        if (ele[i].checked)
            return ele[i].value;
    }
    return ""
}

var formABO = getRadioValue("radioField"); // Value here

Есть идеи?

10000