我有一个页面使用 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>
我试图查看 Twitter Bootstrap 文档,但它确实很少。我想POST
将数据发送到Django view that's listening for
POST` 请求。
这是最基本的。我regex
用来在存储电子邮件 ID 之前比较电子邮件的格式。因此,如果电子邮件does not
匹配,regex
则视图返回一个Invalid Email
. 所以我想在其内部通知用户modal
。但我真的不知道如何做到这一点。有人请帮忙。
更新 1
根据 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>
有一些事情让我感到困惑。的onclick
事件modal button
呢?
我得到了它!我name="Email"
在行中添加<input type="email" placeholder="email"/>
Django 字段正在寻找Email Field
. 所以在我的 Django 视图中,代码是:
request.POST.get("Email", '')
因此,指定字段名称会有所帮助。但它会将我带到我发布的 URL。我希望它在同一页面中显示警报。
更新 2
所以第 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
进入label
.modal