如何使用javascript在name属性上添加一个？

我有一个动态表单部分，我需要name属性也是动态的。 每次用户创建新分区时，该数字应始终为+1

name=“培训****[机构]”

这对于正确的SQL插入非常重要。。。否则数组将不会有经典的数据库逻辑

有什么想法吗？非常感谢法国

    <form method="post" action="">

    <!-- INFO SECTION -->
    <div id="infos">
        <h2>Infos personnelles</h2>
        <input placeholder="Prénom">
        <input placeholder="Nom">     
    </div>


    <!-- TRAINING SECTION -->
    <div id="training">
        <h2>Formation</h2>
        <!-- Template -->
        <div id="new-training" style="display:none">
            <div>
                    </br>
                    <p></p>
                    <input id="mytext" type="text" name="training[1][institut]" placeholder="Diplôme" value="">
                    <input name="training[1][institut]" placeholder="Institut">
            </div>
        </div>
    </div>

    <p id="addnew">
        <a href="javascript:addTraining()">+ Ajouter une formation</a>
    </p>

    <p>
        <br>
        <input type="submit" value="Sauvergarder" name="submit">
    </p>
</form>


<script> // 1st : Enregistrer / supprimer une formation

var ct = 1;

function addTraining()
{
    ct++;
    var div1 = document.createElement('div');
    div1.id = ct;
    // link to delete extended form elements
    var delLink = '<a href="javascript:removeTraining('+ ct +')">Supprimer cette formation</a>';
    div1.innerHTML = document.getElementById('new-training').innerHTML + delLink;
    document.getElementById('training').appendChild(div1);
}

function removeTraining(eleId)
{
    d = document;
    var ele = d.getElementById(eleId);
    var parentEle = d.getElementById('training');
    parentEle.removeChild(ele);
}

个人信息
形成









//第一：注册人/供应商联合信息
var-ct=1；
函数addTraining（）
{
ct++；
var div1=document.createElement（'div'）；
div1.id=ct；
//删除扩展表单元素的链接
var delLink=''；
div1.innerHTML=document.getElementById（'new-training'）。innerHTML+delLink；
文件.getElementById（'training'）.appendChild（第1部分）；
}
功能移除训练（eleId）
{
d=文件；
var ele=d.getElementById（eleId）；
var parentEle=d.getElementById（'training'）；
父母移除儿童（ele）；
}

这样写

name

属性，你应该在发布表单时从表单中获取所有数据

---

下面是一个工作示例，其中添加了注释

试验
个人信息
形成




+阿尤内组





const addTraining=（）=>{
//获取父容器以将新输入放入
const parent=document.getElementById（'training'）；
//创建DIV以环绕输入元素
设div=document.createElement（'div'）
//创建具有唯一名称属性的新输入
让newInput1=document.createElement（'input'）；
让newInput2=document.createElement（'input'）；
//您可以获取所有现有元素的数组，并添加1以为每个元素创建唯一的名称
设num=parent.querySelectorAll（'div'）。长度+1，
newName='training['+num+'][institut]'；
//设置名称属性
newInput1.setAttribute（'name'，newName）；
newInput2.setAttribute（'name'，newName）；
//设置您已经拥有的其他属性
setAttribute（'placeholder'，'Diplôme'）；
setAttribute（'placeholder'，'Institut'）；
setAttribute（'id'，'myText'）；
setAttribute（'type'，'text'）；
//附加元素
父、子（div）；
附件子项（新输入1）；
div.appendChild（newInput2）
}

最好的解决方案（我的观点）是使用一个简单的模板引擎

添加到您的HTML：

<template id="new_el_template" hidden>
  <div id="row-{cid}">
    <input id="mytext-{cid}" type="text" name="training[{cid}][institut]" placeholder="Diplôme" value="">
    <input name="training[{cid}][institut]" placeholder="Institut">
  </div>
  <a href="javascript:removeTraining({cid})">Supprimer cette formation</a>
</template>

---

是的，您可以直接从模板生成初始元素。

描述您的问题。@DanielTran抱歉，有点不清楚。我刚刚编辑了这篇文章！我无法使名称属性动态化！这是我的观点。我已经挣扎了好几个小时了！非常感谢@unbyyd！你的代码看起来很枯燥！但是，删除功能在代码升级期间中断。试图通过在模板中创建具有“training”id的div来解决此问题。。。但是没有成功。有什么线索吗？删除不是问题：但是如果你需要重置计数器，它需要呈现全行。如果不是所有行都被删除，如果所有行都被删除，那么你可以向计数器索要0我欠你一杯咖啡，兄弟；）工作完美！

var ct = 1;
function addTraining() {
    ct++;              
    let div = document.createElement('div');
    div.innerHTML = document.getElementById('new_el_template').innerHTML.replace(/\{cid\}/gi, ct);
    document.getElementById('training').appendChild(div);
}
function removeTraining(eleId) {
   document.getElementById('row-' + eleId).parentNode.remove();
}