我正在尝试找出html like here
中的多种格式输入以下是我的问题:
当我单击“添加更多部分”时,我希望具有与新部分相同的Web表单输入。请帮助我。
谢谢。
我正在使用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>
答案 0 :(得分:0)
您需要在.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')