如何解决在表单onsubmit函数中使用Bootstrap 4模式确认对话框
我有一个表单，其onsubmit验证可使用html Confirm（）方法正确运行。我想用Bootstrap确认模式对话框替换confirm方法，但是在用户响应Bootstrap模式对话框之前，还没有找到一种阻止表单提交的方法。我当前的代码基于以下示例：https://codepen.io/ajchambeaud/pen/KpVvMV
如何防止表单提交时间过长，以使用户无法响应Bootstrap Modal对话框？
以下是烧瓶模板的摘录，其中定义了以下形式：
{% extends 'base.html' %}
{% block main %}
<div><br></div>
<div class="card bg-light">
<div class="card-body">
<form name="fabricSpec" onsubmit="return validate();" method="post">
<p>Select the number of shafts on your loom:
<select name="shaftCount">
<option value="8"> 8</option>
{% for i in range(12,100,4) %}
{% if i == shaft_count %}
<option value="{{ i }}" selected> {{ i }}</option>
{% else %}
<option value="{{ i }}"> {{ i }}</option>
{% endif %}
{% endfor %}
{% for i in range(100,201,4) %}
{% if i == shaft_count %}
<option value="{{ i }}" selected>{{ i }}</option>
{% else %}
<option value="{{ i }}">{{ i }}</option>
{% endif %}
{% endfor %}
</select>
</p>
<p>Select the number of blocks in your design:
<select name="blockCount">
{% for i in range(2,10) %}
{% if i == block_count %}
<option value="{{ i }}" selected> {{ i }}</option>
{% else %}
<option value="{{ i }}"> {{ i }}</option>
{% endif %}
{% endfor %}
{% for i in range(10,51) %}
{% if i == block_count %}
<option value="{{ i }}" selected>{{ i }}</option>
{% else %}
<option value="{{ i }}">{{ i }}</option>
{% endif %}
{% endfor %}
</select>
</p>
<div class="col-6">
<input class="btn btn-secondary" type="submit" id="select_gif_btn"
formaction="{{ url_for('selectgif.select_gif_file') }}"
value="Read Weaves from GIF">
<input class="btn btn-primary" type="submit" id="select_weaves_btn"
formaction="{{ url_for('weavemap.weave_map') }}"
value="Select Weaves">
</div>
</form>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="warnModal" tabindex="-1" role="dialog" aria-labelledby="warnModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="warnModalLabel">Warning</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button id="modal-btn-yes" type="button" class="btn btn-secondary">Yes</button>
<button id="modal-btn-no" type="button" class="btn btn-primary">No</button>
</div>
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
<script language="javascript">
// based on https://codepen.io/ajchambeaud/pen/KpVvMV
var modalConfirm = function (callback) {
$("#modal-btn-yes").on("click",function (e) {
callback(true);
$("#warnModal").modal('hide');
});
$("#modal-btn-no").on("click",function (e) {
callback(false);
$("#warnModal").modal('hide');
});
}
function showWarnModal(message) {
$('#warnModal .modal-body').text(message);
$('#warnModal').modal('show');
modalConfirm(function (confirm) {
if (confirm) {
console.log('confirmed');
window.document.fabricSpec.submit();
} else {
console.log('not confirmed');
}
});
}
function validate() {
var form = window.document.fabricSpec;
var shaftCount = form.shaftCount.value;
var blockCount = form.blockCount.value;
var valid = true;
if (blockCount * 4 > shaftCount) {
var warning = "You specified more blocks than your loom can weave without using pickup. " +
"Do you wish to Proceed?"
valid = confirm(warning);
{#showWarnModal(warning);#}
{#valid = false;#}
}
console.log('valid:',valid);
return valid;
}
</script>
{% endblock %}
解决方法
您可以在表单标签上设置ID，然后在用户单击确认按钮时使用jquery提交表单。因此，您应该将modalConfirm函数更改为此：
modalConfirm(function(confirm){
if(confirm){
//Acciones si el usuario confirma
$("#result").html("CONFIRMADO");
$('#form-id').trigger('submit'); //Add this line and set your form id
}else{
//Acciones si el usuario no confirma
$("#result").html("NO CONFIRMADO");
}
});,
解决方案是在确认模式对话框的回调中设置表单的动作。
{% extends 'base.html' %}
{% block main %}
<div><br></div>
<div class="card bg-light">
<div class="card-body">
<form name="fabricSpec" method="post">
<p>Select the number of shafts on your loom:
<select name="shaftCount">
<option value="8"> 8</option>
{% for i in range(12,100,4) %}
{% if i == shaft_count %}
<option value="{{ i }}" selected> {{ i }}</option>
{% else %}
<option value="{{ i }}"> {{ i }}</option>
{% endif %}
{% endfor %}
{% for i in range(100,201,4) %}
{% if i == shaft_count %}
<option value="{{ i }}" selected>{{ i }}</option>
{% else %}
<option value="{{ i }}">{{ i }}</option>
{% endif %}
{% endfor %}
</select>
</p>
<p>Select the number of blocks in your design:
<select name="blockCount">
{% for i in range(2,10) %}
{% if i == block_count %}
<option value="{{ i }}" selected> {{ i }}</option>
{% else %}
<option value="{{ i }}"> {{ i }}</option>
{% endif %}
{% endfor %}
{% for i in range(10,51) %}
{% if i == block_count %}
<option value="{{ i }}" selected>{{ i }}</option>
{% else %}
<option value="{{ i }}">{{ i }}</option>
{% endif %}
{% endfor %}
</select>
</p>
<div class="col-6">
<input class="btn btn-secondary"
type="button"
name="read_weaves_btn"
onclick="readWeavesValidateAndSubmit()"
value="Read Weaves from GIF">
<input class="btn btn-primary"
type="button"
name="select_weaves_btn"
onclick="selectWeavesValidateAndSubmit()"
value="Select Weaves">
</div>
</form>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="warnModal" tabindex="-1" role="dialog" aria-labelledby="warnModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="warnModalLabel">Warning</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button id="modal-btn-yes" type="button" class="btn btn-secondary">Yes</button>
<button id="modal-btn-no" type="button" class="btn btn-primary">No</button>
</div>
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
<script language="javascript">
// based on https://codepen.io/ajchambeaud/pen/KpVvMV
var modalConfirm = function (callback) {
$("#modal-btn-yes").on("click",function (e) {
callback(true);
$("#warnModal").modal('hide');
});
$("#modal-btn-no").on("click",function (e) {
callback(false);
$("#warnModal").modal('hide');
});
}
function showWarnModal(message,formaction) {
$('#warnModal .modal-body').text(message);
$('#warnModal').modal('show');
modalConfirm(function (confirm) {
if (confirm) {
console.log('confirmed');
var form = window.document.fabricSpec;
form.action = formaction;
form.submit()
} else {
console.log('not confirmed');
}
});
}
function validate(formaction) {
var form = window.document.fabricSpec;
var shaftCount = form.shaftCount.value;
var blockCount = form.blockCount.value;
var valid = true;
if (blockCount * 4 > shaftCount) {
var warning = "You specified more blocks than your loom can weave without using pickup. " +
"Do you wish to Proceed?"
{#valid = confirm(warning);#}
showWarnModal(warning,formaction);
valid = false;
}
console.log('validate: valid:',valid);
return valid;
}
function readWeavesValidateAndSubmit() {
var formaction = "{{ url_for('selectgif.select_gif_file',_external=True) }}";
console.log("formaction: ",formaction)
if (validate(formaction)) {
var form = window.document.fabricSpec;
form.action = formaction;
form.submit()
}
}
function selectWeavesValidateAndSubmit() {
var formaction = "{{ url_for('weavemap.weave_map',formaction)
if (validate(formaction)) {
var form = window.document.fabricSpec;
form.action = formaction;
form.submit()
}
}
</script>
{% endblock %}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。