[英]How to POST the data from a modal form of Bootstrap?
I have a page using a modal
to get the users email and I want to add it to a list of subscribers (which is a Django model).我有一个使用modal
获取用户电子邮件的页面,我想将其添加到订阅者列表(这是一个 Django 模型)。 Here is the modal code for that:这里是模态代码:
<div id="notifications" class="modal hide fade" role="dialog" ara-labelledby="Notification" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
<h4>Subscribe to Status Notifications</h4>
</div>
<form>
<div class="modal-body">
<input type="email" placeholder="email"/>
<p>This service will notify you by email should any issue arise that affects your plivo service.</p>
</div>
<div class="modal-footer">
<input type="submit" value="SUBMIT" class="btn"/>
</div>
</form>
</div>
I tried to look in the Twitter Bootstrap doc but it really is minimal.我试图查看 Twitter Bootstrap 文档,但它确实很小。 I want to POST
the data to a Django view that's listening for
POST` requests.我想POST
数据到Django view that's listening for
POST`请求。
This is the bare essential.这是最基本的。 I am using regex
to compare the format of the email before storing the email id.在存储电子邮件 ID 之前,我使用regex
来比较电子邮件的格式。 So if the email does not
match the regex
the view returns an Invalid Email
.因此,如果电子邮件与regex
does not
匹配, regex
视图将返回Invalid Email
。 So I would like to notify the user about that within the modal
itself.所以我想在modal
本身内通知用户。 But I really have no idea as to how to do this.但我真的不知道如何做到这一点。 Someone please help.有人请帮忙。
Tried this based on karthikr's answer:根据 karthikr 的回答进行了尝试:
<form id="subscribe-email-form" action="/notifications/subscribe/" method="post">
<div class="modal-body">
<input type="email" placeholder="email"/>
<p>This service will notify you by email should any issue arise that affects your service.</p>
</div>
<div class="modal-footer">
<input id="subscribe-email-submit" type="submit" value="SUBMIT" class="btn" />
</div>
</form>
<script>
$(function(){
$('subscribe-email-form').on('submit', function(e){
e.preventDefault();
$.ajax({
url: "/notifications/subscribe/",
type: "POST",
data: $("subscribe-email-form").serialize(),
success: function(data){
alert("Successfully submitted.")
}
});
});
});
</script>
There is something that is confusing me.有件事让我感到困惑。 What about the onclick
event of the modal button
? modal button
的onclick
事件怎么样?
I got it!我知道了! I added name="Email"
in the line <input type="email" placeholder="email"/>
我在<input type="email" placeholder="email"/>
行中添加了name="Email"
The Django field is looking for the Email Field
. Django 字段正在寻找Email Field
。 So in my Django view the code is:所以在我的 Django 视图中,代码是:
request.POST.get("Email", '')
So specifying the field name helps.因此指定字段名称会有所帮助。 But it takes me to the URL where I am posting.但它会将我带到我发布的 URL。 I want it to display a alert in the same page.我希望它在同一页面中显示警报。
So part 1 is working.所以第 1 部分正在工作。 As in the posts are working.正如在帖子中工作一样。 Now I need to show a modal for the success or failure.现在我需要显示成功或失败的模式。
Here's what I am trying.这就是我正在尝试的。 So I created this modal with a textarea
:所以我用textarea
创建了这个模式:
<div id="subscription-confirm" class="modal hide fade in" aria-hidden="true">
<div class="modal-header">
<label id="responsestatus"></label>
</div>
</div>
And the JavaScript:和 JavaScript:
<script>
$(function(){
$('#subscribe-email-form').on('submit', function(e){
e.preventDefault();
$.ajax({
url: 'notifications/subscribe/',
type: 'POST',
data: $('#subscribe-email-form').serialize(),
success: function(data){
$('#responsestatus').val(data);
$('#subscription-confirm').modal('show');
}
});
});
});
</script>
So the modal comes up, but the data is not set
into the label
field of the modal
.所以模态出现了,但数据没有set
到modal
的label
字段中。
You need to handle it via ajax
submit.您需要通过ajax
提交来处理它。
Something like this:像这样的东西:
$(function(){
$('#subscribe-email-form').on('submit', function(e){
e.preventDefault();
$.ajax({
url: url, //this is the submit URL
type: 'GET', //or POST
data: $('#subscribe-email-form').serialize(),
success: function(data){
alert('successfully submitted')
}
});
});
});
A better way would be to use a django form, and then render the following snippet:更好的方法是使用 django 表单,然后呈现以下代码段:
<form>
<div class="modal-body">
<input type="email" placeholder="email"/>
<p>This service will notify you by email should any issue arise that affects your plivo service.</p>
</div>
<div class="modal-footer">
<input type="submit" value="SUBMIT" class="btn"/>
</div>
</form>
via the context - example : {{form}}
.通过上下文 - 示例: {{form}}
。
I was facing same issue not able to post form without ajax.我面临同样的问题,无法在没有 ajax 的情况下发布表单。 but found solution , hope it can help and someones time.但找到了解决方案,希望它可以帮助和某人的时间。
<form name="paymentitrform" id="paymentitrform" class="payment"
method="post"
action="abc.php">
<input name="email" value="" placeholder="email" />
<input type="hidden" name="planamount" id="planamount" value="0">
<input type="submit" onclick="form_submit() " value="Continue Payment" class="action"
name="planform">
</form>
You can submit post form, from bootstrap modal using below javascript/jquery code : call the below function onclick of input submit button您可以使用下面的 javascript/jquery 代码从引导模式提交帖子表单:在输入提交按钮的单击上调用以下函数
function form_submit() {
document.getElementById("paymentitrform").submit();
}
You CAN include a modal within a form.您可以在表单中包含一个模态。 In the Bootstrap documentation it recommends the modal to be a "top level" element, but it still works within a form.在 Bootstrap 文档中,它推荐模态是“顶级”元素,但它仍然可以在表单中工作。
You create a form, and then the modal "save" button will be a button of type="submit" to submit the form from within the modal.您创建一个表单,然后模态“保存”按钮将是一个 type="submit" 按钮,用于从模态内提交表单。
<form asp-action="AddUsersToRole" method="POST" class="mb-3">
@await Html.PartialAsync("~/Views/Users/_SelectList.cshtml", Model.Users)
<div class="modal fade" id="role-select-modal" tabindex="-1" role="dialog" aria-labelledby="role-select-modal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Select a Role</h5>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Add Users to Role</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</form>
You can post (or GET) your form data to any URL.您可以将表单数据发布(或获取)到任何 URL。 By default it is the serving page URL, but you can change it by setting the form action
.默认情况下,它是服务页面 URL,但您可以通过设置表单action
来更改它。 You do not have to use ajax.您不必使用 ajax。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.