Javascript цикл через несколько форм, получить все входные значения - PullRequest
Новая
       11

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

0 голосов
/ 22 апреля 2019

Мне нужно построить объект из входных значений нескольких форм без использования jQuery. 

    <div id="formMain">
    <form id="form_id_1" class="formClass">
        <div id="fullname">
            <p>Full Name</p>
            <input type="text" class="inputClass" name="name" value="Joe">
            <br/>
            <input type="text" class="inputClass" name="name2" value="Doe">
        </div>
        <div id="Address">
            <p>Address</p>
            <input type="text" class="inputClass" name="address" value="1st Maint Street">
        </div>
    </form>
    <form id="form_id_2" class="formClass">
        <div id="fullname">
            <p>Full Name</p>
            <input type="text" class="inputClass" name="name" id="name1" value="Mary">
            <br/>
            <input type="text" class="inputClass" name="name2" id="name2" value="Doe">
        </div>
        <div id="Address">
            <p>Address</p>
            <input type="text" class="inputClass" name="address" id="addressId" value="2nd Maint Street">
        </div>
    </form>
</div>

конечный результат должен быть объектом: 

"profile":[
{
   "name":"Joe",
   "name2":"Doe",
   "address":"1st Maint Street",
},
{
    "name":"Mary",
    "name2":"Doe",
    "address":"2nd Maint Street",
 },

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

Я могу получить значения первой формы, но я застреваю при добавлении нескольких форм, я пытаюсь выполнить циклОсновной элемент, но просто не работает.Выше приведен мой первый пример кода. 

var formdata = document.getElementById('formMain').getElementsByTagName('input')
var form = [].map.call(formdata, function( input ) {
    return {'value':input.value};
});

Ответы [ 5 ]

4 голосов
/ 22 апреля 2019

Посмотрите на это - используя querySelectorAll, forEach и push.

В качестве альтернативы Array.map, если обратный вызов возвращает созданные объекты. коллекция HTML-элементов должна быть приведена к массиву для использования карты 

console.log("Using forEach on the HTML collection")

let profile = [];
document.querySelectorAll("form").forEach(f => {
  let obj = {};
  f.querySelectorAll("input").forEach(ele => obj[ele.name] = ele.value || "");
  profile.push(obj)
})
console.log(profile)

// ---------------------------------------------------------------

console.log("Using Array.map on a HTML collection cast to Array")

profile = [...document.querySelectorAll("form")].map(f => {
  let obj = {};
  f.querySelectorAll("input").forEach(ele => obj[ele.name] = ele.value || "");
  return obj;
})
console.log(profile)
<div id="formMain">
  <form id="form_id_1" class="formClass">
    <div id="fullname">
      <p>Full Name</p>
      <input type="text" class="inputClass" name="name" value="Joe">
      <br/>
      <input type="text" class="inputClass" name="name2" value="Doe">
    </div>
    <div id="Address">
      <p>Address</p>
      <input type="text" class="inputClass" name="address" value="1st Maint Street">
    </div>
  </form>
  <form id="form_id_2" class="formClass">
    <div id="fullname">
      <p>Full Name</p>
      <input type="text" class="inputClass" name="name" id="name1" value="Mary">
      <br/>
      <input type="text" class="inputClass" name="name2" id="name2" value="Doe">
    </div>
    <div id="Address">
      <p>Address</p>
      <input type="text" class="inputClass" name="address" id="addressId" value="2nd Maint Street">
    </div>
  </form>
</div>
2 голосов
/ 22 апреля 2019 

var forms = document.querySelectorAll("form");
var result = Array.from(forms).map(a => {
	var obj = {};
	Array.from(a.querySelectorAll("[name]")).forEach(b => {
		obj[b.getAttribute("name")] = b.value;
	});
	return obj;
});
console.log(result);
   <div id="formMain">
    <form id="form_id_1" class="formClass">
        <div id="fullname">
            <p>Full Name</p>
            <input type="text" class="inputClass" name="name" value="Joe">
            <br/>
            <input type="text" class="inputClass" name="name2" value="Doe">
        </div>
        <div id="Address">
            <p>Address</p>
            <input type="text" class="inputClass" name="address" value="1st Maint Street">
        </div>
    </form>
    <form id="form_id_2" class="formClass">
        <div id="fullname">
            <p>Full Name</p>
            <input type="text" class="inputClass" name="name" id="name1" value="Mary">
            <br/>
            <input type="text" class="inputClass" name="name2" id="name2" value="Doe">
        </div>
        <div id="Address">
            <p>Address</p>
            <input type="text" class="inputClass" name="address" id="addressId" value="2nd Maint Street">
        </div>
    </form>
</div>
1 голос
/ 22 апреля 2019
  • querySelectorAll ( mdn ) может использоваться для извлечения форм и входных данных.
  • flatMap ( mdn ) может использоваться для отображения форм на входы.
  • синтаксис расширения [...iterable] ( mdn ) может использоватьсяпреобразовать список узлов, возвращаемый querySelectorAll в массив. 

let inputs = [...document.querySelectorAll('form')].flatMap(a => [...a.querySelectorAll('input')]);
console.log(inputs);
<div id="formMain">
    <form id="form_id_1" class="formClass">
        <div id="fullname">
            <p>Full Name</p>
            <input type="text" class="inputClass" name="name" value="Joe">
            <br/>
            <input type="text" class="inputClass" name="name2" value="Doe">
        </div>
        <div id="Address">
            <p>Address</p>
            <input type="text" class="inputClass" name="address" value="1st Maint Street">
        </div>
    </form>
    <form id="form_id_2" class="formClass">
        <div id="fullname">
            <p>Full Name</p>
            <input type="text" class="inputClass" name="name" id="name1" value="Mary">
            <br/>
            <input type="text" class="inputClass" name="name2" id="name2" value="Doe">
        </div>
        <div id="Address">
            <p>Address</p>
            <input type="text" class="inputClass" name="address" id="addressId" value="2nd Maint Street">
        </div>
    </form>
</div>
0 голосов
/ 22 апреля 2019

вы можете попробовать как ниже 

var formMain = document.getElementById("formMain");
var formMresultAreaain = document.getElementById("resultArea");
var result = [];
var formData = '<form class="formClass">' +
  '<div id="fullname">' +
  '<p>Full Name</p>' +
  '<input type="text" class="inputClass" name="name" value="Joe">' +
  '<br/>' +
  '<input type="text" class="inputClass" name="name2" value="Doe">' +
  '</div>' +
  '<div id="Address">' +
  '<p>Address</p>' +
  '<input type="text" class="inputClass" name="address" value="1st Maint Street">' +
  '</div>' +
  '</form>';

function addForm() {
  formMain.innerHTML += formData;
}

function submitForms() {
  var forms = document.getElementsByTagName("form");
  var inputs;
  var tempResult = {};
  result = [];
  for (var i = 0; i < forms.length; i++) {
    inputs = forms[i].getElementsByTagName("input");
    tempResult = {};
    for (var j = 0; j < inputs.length; j++)
      tempResult[inputs[j].name] = inputs[j].value;
    result.push(tempResult);
  }
  console.log(result);
}
<input type="button" onclick="addForm()" value="Add Form" />

<div id="formMain">

</div>

<hr/>

<input type="button" onclick="submitForms()" value="Submit" />
0 голосов
/ 22 апреля 2019

Вы можете добавить обратный вызов, отправить и прослушать событие или выполнить опрос при добавлении новой формы, а затем перебрать формы, используя селектор контейнера форм.

Пример 

const forms = document.querySelector("#formMain form");
if (forms.length) {
    forms.forEach(form, () => {
        // Do somthing here
    }
}
...