Как можно создавать новые поля для ввода при каждом нажатии на кнопку и затем получить данные из всех этих полей при отправке формы с использованием Flask?

Как можно сделать так, чтобы при нажатии на кнопку создавался новый элемент input в форме, и каким образом можно получить данные из всех созданных input'ов при отправке формы, используя JavaScript?
  • 14 июля 2024 г. 20:02
Ответы на вопрос 3
Для создания новых полей для ввода при каждом нажатии на кнопку с использованием Flask, можно использовать JavaScript для добавления новых элементов input в форму. 

Пример кода на HTML с JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Dynamic Input Fields</title>
</head>
<body>
    <form method="POST" action="/submit">
        <div id="input-container">
            <input type="text" name="field1">
        </div>
        <button type="button" onclick="addInputField()">Add Input Field</button>
        <button type="submit">Submit</button>
    </form>

    <script>
        let counter = 1;

        function addInputField() {
            counter++;
            const inputContainer = document.getElementById('input-container');
            const newInput = document.createElement('input');
            newInput.type = "text";
            newInput.name = "field" + counter;
            inputContainer.appendChild(newInput);
        }
    </script>
</body>
</html>
```

При отправке формы данные из всех созданных input'ов будут отправлены на сервер. В Flask можно получить эти данные следующим образом:

```python
from flask import Flask, request

app = Flask(__name)

@app.route('/', methods=['GET', 'POST'])
def index():
    if request.method == 'POST':
        input_values = [value for key, value in request.form.items() if key.startswith('field')]
        return f"Input values: {input_values}"
    return '''<form method="POST">
                  <input type="text" name="field1">
                  <button type="button" onclick="addInputField()">Add Input Field</button>
                  <button type="submit">Submit</button>
              </form>
              <script>
                  let counter = 1;

                  function addInputField() {
                      counter++;
                      const inputContainer = document.querySelector('form');
                      const newInput = document.createElement('input');
                      newInput.type = "text";
                      newInput.name = "field" + counter;
                      inputContainer.insertBefore(newInput, document.querySelector('button[type="submit"]'));
                  }
              </script>'''

if __name__ == '__main__':
    app.run()
```

Таким образом, при каждом нажатии на кнопку "Add Input Field" будет создаваться новое поле для ввода, и при отправке формы данные из всех созданных полей будут отправлены на сервер Flask.
можно было получить данные ИЗ ВСЕХ созданных мной input'ов

Ну, например, дотягиваться до них любым методом документа, получающего ноду, и получать свойство value этой ноды:
let input_value_1 = document.querySelector('CSS селектор на ваш первый input').value;
let input_value_2 = document.querySelector('CSS селектор на ваш второй input').value;
Ну генерируйте их через JS с уникальным name и потом отправляйте форму как FormData 
https://learn.javascript.ru/formdata

Другой вариант - элементы формы доступны через свойство .elements у формы.
https://learn.javascript.ru/form-elements

Дополнительные статьи по вопросу:
https://learn.javascript.ru/forms-submit
https://learn.javascript.ru/modifying-document
Похожие вопросы