Python 如何从 Bootstrap 的模态形式发布数据？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17508444/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to POST the data from a modal form of Bootstrap?
提问by Indradhanush Gupta
I have a page using a modalto get the users email and I want to add it to a list of subscribers (which is a Django model). Here is the modal code for that:
我有一个使用 amodal来获取用户电子邮件的页面，我想将其添加到订阅者列表中（这是一个 Django 模型）。这里是模态代码：
<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. I want to POSTthe data to a Django view that's listening forPOST` requests.
我试图查看 Twitter Bootstrap 文档，但它确实很小。我想POST将数据发送到Django view that's listening forPOST` 请求。
This is the bare essential. I am using regexto compare the format of the email before storing the email id. So if the email does notmatch the regexthe view returns an Invalid Email. So I would like to notify the user about that within the modalitself. But I really have no idea as to how to do this. Someone please help.
这是最基本的。我使用regex在存储电子邮件 ID 之前比较电子邮件的格式。因此，如果电子邮件does not与regex视图匹配，则视图返回Invalid Email. 所以我想在内部通知用户modal。但我真的不知道如何做到这一点。有人请帮忙。
UPDATE 1
更新 1
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 onclickevent of the modal button?
有件事让我感到困惑。的onclick事件modal button呢？
I got it! I added name="Email"in the line <input type="email" placeholder="email"/>
我知道了！我name="Email"在行中添加<input type="email" placeholder="email"/>
The Django field is looking for the Email Field. So in my Django view the code is:
Django 字段正在寻找Email Field. 所以在我的 Django 视图中，代码是：
request.POST.get("Email", '')
So specifying the field name helps. But it takes me to the URL where I am posting. I want it to display a alert in the same page.
因此指定字段名称会有所帮助。但它会将我带到我发布的 URL。我希望它在同一页面中显示警报。
UPDATE 2
更新 2
So part 1 is working. As in the posts are working. Now I need to show a modal for the success or failure.
所以第 1 部分正在工作。正如在帖子中工作一样。现在我需要显示成功或失败的模式。
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 setinto the labelfield of the modal.
因此，模态出现，但数据并不set进入label的领域modal。
采纳答案by karthikr
You need to handle it via ajaxsubmit.
您需要通过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}}。
回答by shashikant kuswaha
I was facing same issue not able to post form without ajax. but found solution , hope it can help and someones time.
我面临同样的问题，无法在没有 ajax 的情况下发布表单。但找到了解决方案，希望它可以帮助和某人的时间。
<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();
}
回答by Jess
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. By default it is the serving page URL, but you can change it by setting the form action. You do not have to use ajax.
您可以将表单数据发布（或获取）到任何 URL。默认情况下，它是服务页面 URL，但您可以通过设置表单来更改它action。您不必使用 ajax。
