генерировать Dynami c Div и получить значение входных элементов - PullRequest
Новая
       10

генерировать Dynami c Div и получить значение входных элементов

0 голосов
/ 05 апреля 2020

У меня есть div с элементами ввода с кнопками Add и Cancel. Когда пользователь нажал на кнопку «Добавить», мне нужно сгенерировать div с теми же элементами ввода и записать значение в JSon объект.

Вот мой фрагмент кода 

    <div id="filterfields" class="row collapse">

    <form class="form-inline" id="filterFieldsForm">
        <select class="form-control" name="TypeCode" id="filterType_0">

            <option value="Type">Type</option>
            <option value="SubmittedBy">SubmittedBy</option>
            <option value="Date">Date</option>
            <option value="Description">Description</option>

        </select>
        <select class="form-control" name="Filter" id="filterCondition_0">

            <option value="Equal">Equal</option>
            <option value="StartsWith">Starts With</option>
            <option value="EndsWith">Ends With</option>
            <option value="Greaterthan">Greater Than</option>
            <option value="Lessthan">Less Than</option>
        </select>
        <input type="text" name="caseFilterText" class="form-control" id="filterText_0">
        <input class="form-control" type="radio" name="inlineRadioOptions" id="andRadio_0" value="AND">
        <label for="andRadio">AND</label>
        <input class="form-control" type="radio" name="inlineRadioOptions" id="orRadio_0" value="OR">
        <label for="orRadio">OR</label>
        <button id="addBtn_0" type="button" class="btn btn-secondary">Add</button>
        <button id="cancelBtn_0" type="button" class="btn btn-secondary">Cancel</button>

    </form>


</div>

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

  $('#addBtn_' + count).click(function () {

            var newel = $("#filterfields").clone(true);

            var jsonData = [];

            $(newel).insertAfter("#filterfields");

            var index;

            $("#filterfields").find('input:text,select').each(function () {

                let str = '{"' + this.id + '":' + (this.value + '}';
                jsonData.push(str);

            }).end()

            newel.find(':input').each(function () {

                var oldId = $(this).attr("id");
                var split = oldId.toString().split('_');
                index = parseInt(split[1]);
                var curId = split[0];

                var newId = curId + "_" + index + 1;
                this.id = newId;

            }).end()

            jsonData.push('"filterClause":' + $('input[name="inlineRadioOptions"]:checked').val() + '"');

        });

Пожалуйста, предложите мне, если есть лучший способ добиться такой же функции, как я не удалось получить значения входных элементов текущей строки.

1 Ответ

1 голос
/ 05 апреля 2020

Рассмотрим следующий код. 

$(function() {
  function formToJson(fObj) {
    var j = [];
    fObj.children().not("button, label").each(function(i, el) {
      // Will avoid buttons and labels
      if (!($(el).is(":radio") && !$(el).is(":checked"))) {
        // Will avoid unselected Radio Buttons
        var d = {
          nodeName: $(el).prop("nodeName"),
          props: {
            class: $(el).attr("class"),
            id: $(el).attr("id")
          },
          value: $(el).val(),
          name: $(el).attr("name")
        };
        if (d.nodeName != "SELECT") {
          d.props.type = $(el).attr("type");
        }
        j.push(d);
      }
    });
    return j;
  }
  $("[id^='addBtn']").click(function() {
    var jsonData = formToJson($("#filterFieldsForm"));
    console.log(jsonData);
    var filter = "Filter: ";
    $.each(jsonData, function(key, item) {
      if (key != 2) {
        filter += item.value + " ";
      } else {
        filter += "'" + item.value + "' ";
      }
    });
    $("<div>", {
      class: "filter-results"
    }).html(filter).appendTo("body");
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="filterfields" class="row collapse">
  <form class="form-inline" id="filterFieldsForm">
    <select class="form-control" name="TypeCode" id="filterType_0">
      <option value="Type">Type</option>
      <option value="SubmittedBy">SubmittedBy</option>
      <option value="Date">Date</option>
      <option value="Description">Description</option>
    </select>
    <select class="form-control" name="Filter" id="filterCondition_0">
      <option value="Equal">Equal</option>
      <option value="StartsWith">Starts With</option>
      <option value="EndsWith">Ends With</option>
      <option value="Greaterthan">Greater Than</option>
      <option value="Lessthan">Less Than</option>
    </select>
    <input type="text" name="caseFilterText" class="form-control" id="filterText_0">
    <input class="form-control" type="radio" name="inlineRadioOptions" id="andRadio_0" value="AND">
    <label for="andRadio">AND</label>
    <input class="form-control" type="radio" name="inlineRadioOptions" id="orRadio_0" value="OR">
    <label for="orRadio">OR</label>
    <button id="addBtn_0" type="button" class="btn btn-secondary">Add</button>
    <button id="cancelBtn_0" type="button" class="btn btn-secondary">Cancel</button>
  </form>
</div>

Поскольку вы перебираете элементы, лучше всего использовать .each(). Используя правильный селектор, мы можем выбрать только те элементы формы, которые вы хотите. Затем вы хотите, чтобы условие гарантировало, что если радиокнопка выбрана (или отмечена), она включена, а другие исключены.

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

Обновление 

$(function() {
  function formToJson(fObj) {
    var j = [];
    fObj.each(function(i, el) {
      var d = {};
      $("select, input", el).each(function(k, v) {
        if (!($(v).is(":radio") && !$(v).is(":checked"))) {
          d[$(v).attr("id")] = $(v).val();
        }
      });
      j.push(d);
    });
    return j;
  }

  $("[id^='addBtn']").click(function() {
    var jsonData = formToJson($("#filterFieldsForm"));
    console.log(jsonData);
    var filter = "Filter: ";
    $.each(jsonData, function(key, item) {
      if (key != 2) {
        filter += item.value + " ";
      } else {
        filter += "'" + item.value + "' ";
      }
    });
    $("<div>", {
      class: "filter-results"
    }).html(filter).appendTo("body");
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="filterfields" class="row collapse">
  <form class="form-inline" id="filterFieldsForm">
    <select class="form-control" name="TypeCode" id="filterType_0">
      <option value="Type">Type</option>
      <option value="SubmittedBy">SubmittedBy</option>
      <option value="Date">Date</option>
      <option value="Description">Description</option>
    </select>
    <select class="form-control" name="Filter" id="filterCondition_0">
      <option value="Equal">Equal</option>
      <option value="StartsWith">Starts With</option>
      <option value="EndsWith">Ends With</option>
      <option value="Greaterthan">Greater Than</option>
      <option value="Lessthan">Less Than</option>
    </select>
    <input type="text" name="caseFilterText" class="form-control" id="filterText_0">
    <input class="form-control" type="radio" name="inlineRadioOptions" id="andRadio_0" value="AND">
    <label for="andRadio">AND</label>
    <input class="form-control" type="radio" name="inlineRadioOptions" id="orRadio_0" value="OR">
    <label for="orRadio">OR</label>
    <button id="addBtn_0" type="button" class="btn btn-secondary">Add</button>
    <button id="cancelBtn_0" type="button" class="btn btn-secondary">Cancel</button>
  </form>
</div>

Это будет предназначаться для различных rows и для каждой строки, будет собирать все Select и Inputs.

...