读取动态表单的元素

Posted 2023-05-09

【中文标题】读取动态表单的元素

【英文标题】：Read elements of dynamic form

【发布时间】：2017-11-18 23:32:08

【问题描述】：

我有一个表单，用户可以在其中添加任意数量的字段。他们还可以删除这些字段。

我希望能够有一个数组来跟踪表单中的值 - 最好不使用提交按钮。 即，只要用户更改值，该数组就会更新在表格中。

但是，我不知道该怎么做——所以我尝试使用提交按钮制作一个。但是，它只读取最终表单条目，而不是所有条目。

这是我在这里的尝试：

document.querySelector('form.data').addEventListener('submit', function (e) 
//prevent the normal submission of the form
e.preventDefault();
var values = ;
$.each($('form.data').serializeArray(), function(i, field) 
values[field.name] = field.value;
);

console.info(values);    

);

JSFiddle： https://jsfiddle.net/tomi2/4cqtpefm/4/

完整代码：

html：

    <form role="form" action="/wohoo" method="POST" class="data">
      <label>Variable 1, Variable 2</label>
        <div class="multi-field-wrapper">
          <div class="multi-fields">
            <div class="multi-field">
              <input type="text" name="Var1[]">
              <input type="text" name="Var2[]">
              <button type="button" class="remove-field">Remove</button>
            </div>
          </div>
        <button type="button" class="add-field">Add field</button>
        <button type="submit"> Submit </button>

      </div>
    </form>

javascript：

$('.multi-field-wrapper').each(function() 
    var $wrapper = $('.multi-fields', this);
    $(".add-field", $(this)).click(function(e) 
        $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
    );
    $('.multi-field .remove-field', $wrapper).click(function() 
        if ($('.multi-field', $wrapper).length > 1)
            $(this).parent('.multi-field').remove();
    );
);

document.querySelector('form.data').addEventListener('submit', function (e) 
    //prevent the normal submission of the form
    e.preventDefault();

    var values = ;
    $.each($('form.data').serializeArray(), function(i, field) 
    values[field.name] = field.value;
);

    console.info(values);    



);

【问题讨论】：

您遇到的问题是因为当您克隆行输入字段时具有相同的名称。我可以用生成的名称为您举例，这对您来说可以吗？

那很好 - 可能更有帮助 - 但如果它生成名称，我仍然希望能够对所有输入进行操作。 IE。能够总结所有输入的数据，但如果它们不在一个大数组中，我不知道该怎么做。

看看我发布的@answer，它为您提供了所有结果，变量为数组

【参考方案1】：

在这里，试试这个..这将在提交时为您提供完整的结果..

var $wrapper = $('.multi-fields');
$(".add-field").on( 'click', function(e) 
  $('.multi-field:first-child',       $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
);
$('.multi-field .remove-field', $wrapper).click(function() 
  if ($('.multi-field', $wrapper).length > 1)
    $(this).parent('.multi-field').remove();
);


$('button[type="submit"]').on('click', function(el) 
  el.preventDefault();
  alert( JSON.stringify( $('form').serializeArray() ) );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


    <form role="form" action="/wohoo" method="POST" class="data">
      <label>Variable 1, Variable 2</label>
        <div class="multi-field-wrapper">
          <div class="multi-fields">
            <div class="multi-field">
              <input type="text" name="Var1[]">
              <input type="text" name="Var2[]">
              <button type="button" class="remove-field">Remove</button>
            </div>
          </div>
        <button type="button" class="add-field">Add field</button>
        <button type="submit"> Submit </button>

      </div>
    </form>