Как можно создавать новые поля для ввода при каждом нажатии на кнопку и затем получить данные из всех этих полей при отправке формы с использованием 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.
<blockquote>можно было получить данные ИЗ ВСЕХ созданных мной input'ов</blockquote> <br/> Ну, например, дотягиваться до них любым методом документа, получающего ноду, и получать свойство value этой ноды: <br/> <pre><code class="javascript">let input_value_1 = document.querySelector('CSS селектор на ваш первый input').value;
let input_value_2 = document.querySelector('CSS селектор на ваш второй input').value;</code></pre>
Ну генерируйте их через JS с уникальным name и потом отправляйте форму как FormData <br/> <a href="https://learn.javascript.ru/formdata" rel="nofollow">https://learn.javascript.ru/formdata</a> <br/> <br/> Другой вариант - элементы формы доступны через свойство .elements у формы. <br/> <a href="https://learn.javascript.ru/form-elements" rel="nofollow">https://learn.javascript.ru/form-elements</a> <br/> <br/> Дополнительные статьи по вопросу: <br/> <a href="https://learn.javascript.ru/forms-submit" rel="nofollow">https://learn.javascript.ru/forms-submit</a> <br/> <a href="https://learn.javascript.ru/modifying-document" rel="nofollow">https://learn.javascript.ru/modifying-document</a>
Похожие вопросы