[英]How to POST the data from a modal form of Bootstrap?
我有一个使用modal
获取用户电子邮件的页面,我想将其添加到订阅者列表(这是一个 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>
我试图查看 Twitter Bootstrap 文档,但它确实很小。 我想POST
数据到Django view that's listening for
POST`请求。
这是最基本的。 在存储电子邮件 ID 之前,我使用regex
来比较电子邮件的格式。 因此,如果电子邮件与regex
does not
匹配, regex
视图将返回Invalid Email
。 所以我想在modal
本身内通知用户。 但我真的不知道如何做到这一点。 有人请帮忙。
根据 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>
有件事让我感到困惑。 modal button
的onclick
事件怎么样?
我知道了! 我在<input type="email" placeholder="email"/>
行中添加了name="Email"
Django 字段正在寻找Email Field
。 所以在我的 Django 视图中,代码是:
request.POST.get("Email", '')
因此指定字段名称会有所帮助。 但它会将我带到我发布的 URL。 我希望它在同一页面中显示警报。
所以第 1 部分正在工作。 正如在帖子中工作一样。 现在我需要显示成功或失败的模式。
这就是我正在尝试的。 所以我用textarea
创建了这个模式:
<div id="subscription-confirm" class="modal hide fade in" aria-hidden="true">
<div class="modal-header">
<label id="responsestatus"></label>
</div>
</div>
和 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>
所以模态出现了,但数据没有set
到modal
的label
字段中。
您需要通过ajax
提交来处理它。
像这样的东西:
$(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')
}
});
});
});
更好的方法是使用 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>
通过上下文 - 示例: {{form}}
。
我面临同样的问题,无法在没有 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>
您可以使用下面的 javascript/jquery 代码从引导模式提交帖子表单:在输入提交按钮的单击上调用以下函数
function form_submit() {
document.getElementById("paymentitrform").submit();
}
您可以在表单中包含一个模态。 在 Bootstrap 文档中,它推荐模态是“顶级”元素,但它仍然可以在表单中工作。
您创建一个表单,然后模态“保存”按钮将是一个 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>
您可以将表单数据发布(或获取)到任何 URL。 默认情况下,它是服务页面 URL,但您可以通过设置表单action
来更改它。 您不必使用 ajax。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.