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). Here is the modal code for that:
我有一个页面使用模态来获取用户的电子邮件,我想将它添加到订阅者列表(这是一个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 POST
the data to a django view
thats listening for POST requests
.
我试图查看Twitter Bootstrap文档,但它确实很小。我想将数据发布到侦听POST请求的django视图。
This is the bare essential. I am using regex
to compare the format of the email before storing the email id. So if the email does not
match the regex
the view returns an Invalid Email
. So I would like to notify the user about that within the modal
itself. But I really have no idea as to how to do this. Someone please help.
这是必不可少的。我正在使用正则表达式来比较电子邮件的格式,然后再存储电子邮件ID。因此,如果电子邮件与正则表达式不匹配,则视图将返回无效的电子邮件。所以我想在模态本身内通知用户。但我真的不知道如何做到这一点。有人请帮忙。
UPDATE:
更新:
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
?
有些事让我感到困惑。模态按钮的onclick事件怎么样?
I got it! I added name="Email"
in the line <input type="email" placeholder="email"/>
我知道了!我在行中添加了name =“Email”
The django field is looking for the Email Field
. So in my django view the code is :
django领域正在寻找电子邮件领域。所以在我的django视图中代码是:
request.POST.get("Email", '')
so specifying the field name helps.
request.POST.get(“Email”,“”)因此指定字段名称会有所帮助。
But it takes me to the url where I am posting. I want it to display a alert in the same page.
但它需要我到我发布的网址。我希望它在同一页面中显示警报。
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. Heres what I am trying:
所以第1部分正在运作。如在帖子正在工作。现在我需要显示成功或失败的模态。继承人我在尝试:
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
.
所以模态出现了。但数据未设置到模态的标签字段中。
2 个解决方案
#1
16
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}}。
#2
2
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代码从bootstrap模式提交帖子表单:调用以下函数onclick输入提交按钮
function form_submit() {
document.getElementById("paymentitrform").submit();
}
#1
16
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}}。
#2
2
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代码从bootstrap模式提交帖子表单:调用以下函数onclick输入提交按钮
function form_submit() {
document.getElementById("paymentitrform").submit();
}