Flask - динамически добавлять раздел формы - PullRequest
Новая
       21

Flask - динамически добавлять раздел формы

0 голосов
/ 05 сентября 2018

Я пытаюсь определить мульти-форму ввода в HTML, как здесь

Ниже мой вопрос:

Когда я нажимаю «Добавить еще один раздел», я хочу, чтобы веб-форма вводилась так же, как новый раздел. Пожалуйста, помогите мне в этом.

Спасибо.

Я использую Flask-html 

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="container">
    <div class="row">
      <form role="form">
        <div class="form-group col-xs-10 col-sm-4 col-md-4 col-lg-2">
            <label for="JIRA">JIRA ticket</label>
            <input type="text" class="form-control" id="JIRA" placeholder="JIRA ticket">
        </div>
        <div class="form-group col-xs-8 col-sm-2 col-md-2 col-lg-3">
            <label for="Assignee">Assignee</label>
            <input type="text" class="form-control" id="Assignee" placeholder="Assignee">
        </div>
        <div class="clearfix"></div>
        <div class="form-group col-xs-10 col-sm-4 col-md-4 col-lg-7">
            <label for="Issue">Issue</label>
            <input type="text" class="form-control" id="Issue" placeholder="Issue">
        </div>
        <div class="form-group col-xs-10 col-sm-4 col-md-4 col-lg-9">
            <label for="Description">Description</label>
            <textarea name="Description" rows="5" class="form-control" placeholder="Description" required></textarea>
        </div>
           <div class="form-group col-xs-10 col-sm-4 col-md-4 col-lg-4">
            <label for="Comments">Comments</label>
            <textarea name="Comments" rows="4" class="form-control" placeholder="Comments" required></textarea>
        </div>
             <div class="form-group col-xs-8 col-sm-2 col-md-2 col-lg-3">
            <label for="Status">Status</label>
            <input type="text" class="form-control" id="Status" placeholder="In-progress or Resolved">
        </div>
        <div class="form-group">
            <div class="col-xs-offset-3 col-xs-9">
                <input type="submit" class="btn btn-primary" value="Submit"/>
                <input type="reset" class="btn btn-default" value="Reset"/>
                <input type="button" class="btn btn-default" value="Add one more section"/>
            </div>
    </form>
    <div class="clearfix"></div>

    <br /><br />
    </div>
</div>

1 Ответ

0 голосов
/ 05 сентября 2018

Вам понадобится добавить AJAX в ваш файл .js. Когда вы нажимаете кнопку «Добавить», к существующей добавляется другая форма. 

function addsectionFunction() {
var csrftoken = $('meta[name=csrf-token]').attr('content')

$.ajaxSetup({
    beforeSend: function(xhr, settings) {
        if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type)) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken)
        }
    }
})

$.ajax({
    url: '/add-section',
    data: JSON.stringify(data),
    method: 'POST',
    contentType: 'application/json',
    success: function(data) {
        $('#the-formdiv-id').append(data);
    }
});
};

Кнопка добавления HTML-кода.
<button onClick="addsectionFunction();">Add One More Section</button>

Вид '/add-section' может выглядеть примерно так: 

@app.route('/add-section', methods=['GET', 'POST')
def add_section():
    return render_template('new-section.html')
...