Flask - 动态添加表单部分

Question

我正在尝试找出 html 中的多表单输入，like here

下面是我的问题：

当我点击“再添加一个部分”时，我希望有与新部分相同的网络表单输入。请帮帮我。

谢谢。

我正在使用 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>

Answer 1

您需要在 .js 文件中实现一些 AJAX。当您单击添加按钮时，另一个表单将附加到现有表单上。

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')