我试图弹出一个包含条款和条件的模式窗口,只有当用户接受条款和条件时,数据才会提交到数据库。我想在弹出模式之前验证用户输入。下面是我的代码。
individual_account.html
<form method="post" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4" id="individualForm">
{% csrf_token %} {% for hidden_field in form.hidden_fields %} {{ hidden_field.errors }} {{ hidden_field }} {% endfor %}
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="{{form.full_name.id_for_label}}">
{{ form.full_name.label }}
</label>
{{ form.full_name }}
{% if form.full_name.errors %}
{% for error in form.full_name.errors %}
<p class="text-red-600 text-sm italic pb-2">{{ error }}</p>
{% endfor %}
{% endif %}
</div>
<div class="w-full md:w-1/2 px-3">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="{{form.id_passport_no.id_for_label}}">
{{ form.id_passport_no.label}}
</label>
{{ form.id_passport_no }}
{% if form.id_passport_no.errors %}
{% for error in form.id_passport_no.errors %}
<p class="text-red-600 text-sm italic pb-2">{{ error }}</p>
{% endfor %}
{% endif %}
</div>
</div>
<!-- Button trigger modal -->
<button type="button" class="bg-yellow-700 text-white rounded-none hover:bg-white hover:text-blue-900 hover:border-blue-900 shadow hover:shadow-lg py-2 px-4 border border-gray-900 hover:border-transparent" data-bs-toggle="modal" data-bs-target="#exampleModal">
Create Account
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Terms & Conditions</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Terms & CConditions Here!! </p>
<label><input type="checkbox" id="acceptTerms"> I accept the terms and conditions</label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</form>
views.py
def individual_account(request):
if request.method == 'POST':
form = IndividualForm(request.POST)
if form.is_valid():
form.save()
fullname = form.cleaned_data['full_name']
messages.success(
request,
f'Thank You {fullname} For Creating An Account.'
)
return HttpResponseRedirect(
reverse_lazy('accounts:individual-account')
)
else:
form = IndividualForm()
return render(request, 'accounts/individual_account.html', {'form': form})
我怎样才能实现这个目标?
因此,如果我理解正确,您只想在用户接受弹出模式时执行发布请求,您可以在模式中使用此按钮通过 javascript 发送发布请求:
<button type="button" class="btn btn-primary">Save changes</button>
let csrfToken = "{{csrf_token}}"
async function postRequest() {
let form = document.getElementById("individualForm")
let postUrl = form.action;
let data = new FormData(form)
// include your csrf token for post request in the request header
let headers = new Headers({
"X-CSRFToken": csrfToken,
});
let postResponse = await fetch(postUrl, {
method: "POST",
headers: headers,
body: data,
redirect: "follow",
});
}
当然,您需要一个带有您提到的按钮的 onclick 事件:
<button type="button" class="btn btn-primary" onclick="postRequest()">Save changes</button>
注意: 您不需要使用 fetch api 来执行 post 请求,您可以通过多种方式在 javascript 中执行此操作,我最熟悉 fetch,所以请持保留态度,我希望它有所帮助。