javascript - 如何在动态生成的 HTML 表单中添加名称属性？

Question

我正在使用 Django 模板中的 javascript 在我的表单中生成一个动态输入字段。

但是在 Django 中提交表单时，我需要name每个输入字段中的属性。

像这样：

对于带有 From Area 标签的输入字段，我需要一个类似这样的名称：fromArea-1 同样，对于带有 To Area 标签的输入字段，我需要一个类似这样的名称：toArea-1

任何帮助都是有益的。

这是我的代码：

function addRow() {
    const div = document.createElement('div');

    div.className = 'card';

    div.innerHTML = `
        <div class="card-body">
                <div class="form-group">
                    <label>From Area</label>
                     <select class="form-control" id="exampleFormControlSelect1">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>
                    <br/>
                    <label>To Area</label>
                     <select class="form-control" id="exampleFormControlSelect1">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>
                    <br>
                    <label>Distance</label>
                    <input class="form-control" type="text"></input>
                </div>
        </div>
    `;

    document.getElementById('permission-wrapper').appendChild(div);
    }

<div class="mt-4 ml-4 mr-4">
    <form class="mt-4" method="post">
    <div id="permission-wrapper">
        <div class="card mb-2">
            <div class="card-body">
                <div class="form-group">
                    <label>From Area</label>
                     <select class="form-control" id="exampleFormControlSelect1">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>
                    <br/>
                    <label>To Area</label>
                     <select class="form-control" id="exampleFormControlSelect1">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>
                    <br>
                    <label>Distance</label>
                    <input class="form-control" type="text"></input>
                </div>
            </div>
        </div>
    </div>
        <br/>
    <button class="btn btn-primary float-right" onClick="addRow()">Add</button>
    <button class="btn btn-success" type="submit">Submit</button>
    </form>

    
</div>

标签： javascriptdjango