Блог

Главная - Вопросы по программированию - Как добавить атрибут name в динамически генерируемую HTML-форму?

Как добавить атрибут name в динамически генерируемую HTML-форму?

#javascript #django

#javascript #django

Вопрос:

Я создаю динамическое поле ввода в своей форме, используя javascript в шаблоне Django.

Но при отправке формы в Django мне нужен name атрибут в каждом поле ввода.

Вот так:

Для поля ввода с меткой области From мне нужно, чтобы имя было примерно таким: fromArea-1 Аналогично, для поля ввода с меткой области To мне нужно, чтобы имя было примерно таким: 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>

Комментарии:

1. Что вы пытались сделать, чтобы это работало?

2. Я попытался добавить случайное число, используя Django, к его имени. Но опять же, это совершенно случайно, и я не могу различать поля.

3. Почему случайный? Почему бы просто не увеличить счетчик и не назначить имена с помощью счетчика?