复制和区分表格的各个部分 [英] Replicating and differentiating portions of a form

问题描述

更新:使用colecmc提供的代码(谢谢！)，我更新了代码笔.我喜欢date.now的添加方式，但是我想做一个增量式的增加.我不确定如何将其应用于此功能，我尝试了zer00ne的索引增量，但是做错了事.

UPDATE: Using the code that colecmc provide(Thank you!!) I updated the codepen. I like how the date.now is added, but I would like to just do a an incremental increase. Im not sure how to apply that to this function I tried zer00ne's index incremental but am doing something wrong.

let cloneList = [],
    index = 0; // index must be declared apart from function or else you will set it to the initial value every time the function is called.

document.getElementById('launch').onclick = function(event) {
  event.preventDefault();

  var addOnDiv = document.getElementById('addon');
  var container = document.getElementById('add-components')
  var clonedNode = addOnDiv.cloneNode(true);
  var component = clonedNode.querySelector('input');
  index++;
  clonedNode.id = index+1;

  cloneList.push(clonedNode.id);

  component.id = `componentID_${clonedNode.id}`;
  component.name = `componentName_${clonedNode.id}`;

  container.appendChild(clonedNode);
}

我的表格有问题.最初，我在页面上有两种形式.但是，在提交时，只写入了第一个表格中的信息.我尝试合并表格.现在，如果我填写了活动和组件输入，然后将其提交到正确的表中(好！).但是，应该复制组件部分.广告活动可以具有用户想要的任意数量的组件.我正在使用cloneNode，在合并表之前，它添加了更多的组件部分.现在将它们组合在一起，该功能将不再起作用.我不知道这是否是我正在做的正确方法.我附带了一个copdpen，其中显示了Im试图做的事情的精简版本.

Im having an issue with my form. Initially I had two forms on the page. However on submit only the info from the first form was written. I tried combining the forms. Now if i fill out the campaign and component inputs and submit it writes to the correct tables(good!). However the component section is supposed to be replicated. A campaign can have as many components as the user wants. I am using cloneNode and before I combined the table it added more component sections. Now that they are combined the function no longer works. Im confused if this is even the right approach for what Im doing. I included a copdpen that shows a stripped down version of what Im trying to do.

基本上，我希望能够按添加组件，添加尽可能多的新组件，然后将所有组件作为记录写入数据库.我需要一种区分所有克隆的方法(新的ID或名称?)codepen: https://codepen.io/anon_guy/pen/VM/WWZ?editors=1010

Basically I want to be able to press add component, add as many new components as I'd like fill them out and have then all written as records to the db. I need a way to differentiate all the clones (new ids or names?) codepen: https://codepen.io/anon_guy/pen/VMZWWW?editors=1010

HTML:

<div class="panel panel-default">
  <div class="panel-heading">
  </div>
  <div class="panel-body">
    <form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form-event" class="form-horizontal">
      <div class="col-sm-4">
        <label>name</label>
        <input type="text" name="name" value="name" placeholder="name" id="name" class="form-control" />
      </div>
      <div class="col-sm-4">
        <label>address</label>
        <input type="text" name="address" value="address" placeholder="address" id="address" class="form-control" />
      </div>
      <div class="col-sm-4">
        <label>phone</label>
        <input type="text" name="phone" value="phone" placeholder="phone" id="phone" class="form-control" />
        <div class="text-danger"></div>
      </div>

  </div>
  <div class="row">
  <div class="add_component">
    <button id='launch'>Add Component</button>
  </div>
  </div>
</div>
<div class="wrapper" id="add-components">
  <div class="panel panel-default " id="addon">
    <div class="panel-heading">
    </div>
    <div class="panel-body">

        <div class="col-sm-6">
          <label>component</label>
          <input type="text" name="component" value="component" placeholder="component" id="component" class="form-control" />
        </div>

      </form>
    </div>
  </div>
</div>

JS:

document.getElementById('launch').onclick = function() {
      var addOnDiv = document.getElementById('addon');
  var container = document.getElementById('add-components')
      var clonedNode = addOnDiv.cloneNode(true);
        container.appendChild(clonedNode );
    }

推荐答案

这是我所看到的最接近我认为是通过查看代码来思考的方式.(我还删除了代码中的一些不必要步骤，以使其变得更干净).这是因为您的输入中必须具有不同的名称和ID :.但是，如果您可以设法两者都具有相同的名称(例如component_0，other_0等)，则可以删除名称"数组和forEach的名称".

This is the closest I came to what I believe is your way of thinking by looking at your code. (I also removed some unnecessary steps in your code to make it a little bit cleaner). This is for if you must have different names and ID:s on your inputs. However, if you can manage to have the same for both (i.e. component_0, other_0 etc.), you can remove the "names" array and the "names" forEach.

要向addon-div中添加输入时，只需将ID(如果您决定保留它，则添加名称)即可，例如示例中那样，将不带"_0"的ID添加到数组中.

When you want to add an input to your addon-div, just add the ID (and name if you decide to keep it), without the "_0", to the array/s as in the example.

在html中将名称更改为"otherName_0"，将ID更改为"otherID_0"，这应该可行.

Change the name to "otherName_0" and ID to "otherID_0" in your html and this should work.

var i = 1;
document.getElementById('launch').onclick = function(event) {
  event.preventDefault();

  var addOnDiv = document.getElementById('addon');
  var container = document.getElementById('add-components')
  var clonedNode = addOnDiv.cloneNode(true);
  var ids = ['componentID', 'otherID'];
  var names = ['componentName', 'otherName'];

  ids.forEach(function(id) {
    var currentInput = clonedNode.querySelector(`#${id}_0`);
    currentInput.id = `${id}_${i}`;
  });

  names.forEach(function(name) {
    var currentInput =  clonedNode.querySelector(`input[name=${name}_0]`);
    currentInput.name = `${name}_${i}`;
  });

  container.appendChild(clonedNode);
  i++;
}

这篇关于复制和区分表格的各个部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！