Имя динамической переменной Javascript (в AJAX)

Вопрос:

Для метода AJAX post (от 30 входов в целом) я думал, что это может быть проще упростить привязку переменных для последующей обработки PHP. Но так, как я думал, это можно сделать, не работает так хорошо.

Мой javascript-код:

for (i = 1; i < 10; i++) {
var fieldname+i = $('#f' + i + 'name').val();
var fieldspecify+i = $('#f' + i + 'specify').val();
var fieldwidth+i = $('#f' + i + 'width').val();

var data = {
fieldname+i: fieldname+i,
fieldspecify+i: fieldspecify+i,
fieldwidth+i: fieldwidth+i
};
}

Мой код в html:

<?php for($i = 1; $i < 10; $i++) { ?>
<div style="margin-top:25px;" class="row">
<div class="col-md-5">
<label for="f<?= $i; ?>name">Veld <?= $i; ?>: Wat is de vraag van het veld?</label>
<input type="text" class="form-control" id="f<?= $i; ?>name"
placeholder="Bijv. Wat is 1 + 2?"/>
</div>
<div class="col-md-4">
<label for="f<?= $i; ?>specify">Veld <?= $i; ?>: Soort veld</label>
<select class="form-control" id="f<?= $i; ?>specify">
<option disabled selected>Selecteer..</option>
<option value="0">Tekst-input</option>
<option value="1">Selecteer-input</option>
<option value="2">Textarea-input</option>
</select>
</div>
<div class="col-md-3">
<label for="f<?= $i; ?>width">Veld <?= $i; ?>: Breedte</label>
<select class="form-control" id="f<?= $i; ?>width">
<option disabled selected>Selecteer..</option>
<option value="0">25%</option>
<option value="1">50%</option>
<option value="2">75%</option>
<option value="3">100%</option>
</select>
</div>
</div>

Мой вопрос: каким образом я могу связать переменные проще, чем ввести 30 строк.

Лучший ответ:

Используйте класс вместо уникальных идентификаторов. Затем вы можете просто пропустить их, используя map() чтобы вернуть объект, который содержит соответствующие пары ключ/значение, которые вы можете заполнить, пройдя DOM, чтобы найти элементы, связанные с текущей строкой, что-то вроде этого

var data = $('.row').map(function() {
  var $row = $(this);
  return {
    fname: $row.find('.fname').val(),
    fspecify: $row.find('.fspecify').val(),
    fwidth: $row.find('.fwidth').val(),
  }
}).get();

console.log(data);
.row {
  margin-top: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-5">
    <label>Veld 1: Wat is de vraag van het veld?
        <input type="text" class="form-control fname" placeholder="Bijv. Wat is 1 + 2?"/>
    </label>
  </div>
  <div class="col-md-4">
    <label>Veld 1: Soort veld
      <select class="form-control fspecify">
        <option disabled selected>Selecteer..</option>
        <option value="0">Tekst-input</option>
        <option value="1">Selecteer-input</option>
        <option value="2">Textarea-input</option>
      </select>
    </label>
  </div>
  <div class="col-md-3">
    <label>Veld 1: Breedte
      <select class="form-control fwidth">
        <option disabled selected>Selecteer..</option>
        <option value="0">25%</option>
        <option value="1">50%</option>
        <option value="2">75%</option>
        <option value="3">100%</option>
      </select>
    </label>
  </div>
</div>

<div class="row">
  <div class="col-md-5">
    <label>Veld 2: Wat is de vraag van het veld?
        <input type="text" class="form-control fname" placeholder="Bijv. Wat is 1 + 2?"/>
    </label>
  </div>
  <div class="col-md-4">
    <label>Veld 2: Soort veld
      <select class="form-control fspecify">
        <option disabled selected>Selecteer..</option>
        <option value="0">Tekst-input</option>
        <option value="1">Selecteer-input</option>
        <option value="2">Textarea-input</option>
      </select>
    </label>
  </div>
  <div class="col-md-3">
    <label>Veld 2: Breedte
      <select class="form-control fwidth">
        <option disabled selected>Selecteer..</option>
        <option value="0">25%</option>
        <option value="1">50%</option>
        <option value="2">75%</option>
        <option value="3">100%</option>
      </select>
    </label>
  </div>
</div>

Обратите внимание, что здесь всего 2 строки, но этот шаблон будет работать бесконечно.

Ответ №1

Не используйте имена подсчитанных переменных, то есть переменные с индексом запуска в имени. Это всегда неправильно (помимо синтаксически недействительных в вашем коде).

Если у вас больше, чем на одном и том же, используйте массив.

var fields = [], i;

for (i = 1; i < 10; i++) {
fields.push({
name: $('#f' + i + 'name').val(),
specify: $('#f' + i + 'specify').val(),
width: $('#f' + i + 'width').val()
});
}

Ответ №2

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

const els = document.getElementById("formId").elements;

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

Это основа подхода, но вы можете легко адаптировать его к вашим потребностям. Проверьте консоль, чтобы увидеть выход.

пример

https://jsfiddle.net/9d2szx3k/

HTML

<form id="formId">
<input type="text" value="Name" />
<input type="password" value="Password" />
<input type="tel" value="07888888888" />
<select>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3" selected="selected">Option 3</option>
</select>
</form>

JavaScript

const els = document.getElementById("formId").elements;
console.log(els);

Array.from(els).forEach(el => {
console.log(el.value);
});

Оцените статью
TechArks.Ru
Добавить комментарий