Показать формы имя = значение пары в консоли с ванильным JavaScript?

Question

Я перепробовал более десятка решений, но ни одно из них не позволяет мне сделать

console.log(name + " " + value);

без какой-то изворотливой JavaScript-вещи, которую я не вижу, как это сделать (я получаю около 90% всего в разных комбинациях) ... Мне нужно получить входные данные и выбрать и текстовые области, даже желательно скрытые, все, что вы бы сделали введите или нажмите на типичную форму (за исключением загрузки файла).

Answer 1

Возможно простое решение через querySelectorAll. Вы можете выбрать всех потомков form элементов, имеющих атрибуты name, а затем выполнить итерацию результата, записав каждый элемент в консоль, например так:

document.body
.querySelectorAll('form [name]')
.forEach(element => {

   console.log('name:', element.name, 'value:', element.value);
})

<form>
  <input name="name" value="bob" />
  <input name="age" value="30" />
</form>

Answer 2

Вы можете использовать конструктор FormData, передавая form, для которого вам нужны пары ключ-значение. Если вы передадите form в качестве аргумента, он автоматически будет содержать текущие пары ключ / значение формы (ключ - это имя элементов, а значение - их значение). Содержимое файла ввода также будет закодировано, что делает его идеальным для вызовов AJAX.

var formData = new FormData(document.getElementById("myForm"));
console.log(...formData);

<form id="myForm" name="myForm">
  <div>
    <label for="username">Enter name:</label>
    <input type="text" id="username" name="username"value="John">
  </div>
  <div>
    <label for="useracc">Enter account number:</label>
    <input type="text" id="useracc" name="useracc" value="123456">
  </div>
<input type="submit" value="Submit!">
</form>

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

var formMap = {};
var formElems = document.querySelectorAll('#myForm [name]');
for(var i = 0; i < formElems.length; i++){
  var elem = formElems[i];
  formMap[elem.name] = elem.value;
}
console.log(formMap);
//now you can get the values of the form element with a particular name like so:
//formMap["username"];->"John"

<form id="myForm" name="myForm">
  <div>
    <label for="username">Enter name:</label>
    <input type="text" id="username" name="username"value="John">
  </div>
  <div>
    <label for="useracc">Enter account number:</label>
    <input type="text" id="useracc" name="useracc" value="123456">
  </div>
<input type="submit" value="Submit!">
</form>