javascript alert - after submit in django - django

I have an html form in my website it's using django, and I want show massage "javascript alert()" after submit successfully
this is the form:
<form action="{% url guestbook-post %}" method="POST">{% csrf_token %}
{% for field in form %}
{% if field.is_hidden %}
{{ field }}
{% else %}
<p
{% if field.errors %} class="error"{% endif %}
{% ifequal field.name "honeypot" %} style="display:none;"{% endifequal %}>
{% if field.errors %}{{ field.errors }}{% endif %}
{{ field.label_tag }} {{ field }}
</p>
{% endif %}
{% endfor %}
<p class="submit">
<input type="submit" name="submit" class="submit-post" value="Post" />
<input type="submit" name="submit" class="submit-preview" value="Preview" />
</p>
</form>

Use jQuery with a submit handler:
$('#myForm').submit( function () { alert('Form Submitted'); });
Not sure how Django handles posts, so you may need to do some further routing within the jQuery call...

You could add a javascript function to the submit handler of the form and have an alert in this function. Something like:
<form action="{% url guestbook-post %}" method="POST" onsubmit="return validate()">
<script>
function validate()
{
// do some validation here to decide whether the post is going to be successful or not.
if (valid)
{
alert("Going to post your data now!");
return true;
}
else
{
return false; // form won't post
}
}
</script>

Related

Customized django all-auth form not submitting

I am using the django all-auth login form. I wanted to customize the look of the form fields so I changed login.html within the account folder to look like this:
<form class="login" method="POST" action="{% url 'account_login' %}">
{% csrf_token %}
{% for field in form.visible_fields|slice:'2' %}
<div class="row form-group">
{% if field.name == 'login' %}
<input type="text" placeholder="Email"><i class="fas fa-at"></i>
{% else %}
<input type="password" placeholder="Password"><i class="la la-lock"></i>
{% endif %}
</div>
{% endfor %}
Forgot Password?
<button type="submit">Sign In</button>
</form>
The form renders exactly how I would like it to, however nothing happens when I click on submit. What is strange to me is that the form submits perfectly fine if in place of my for loop I simply type {{ form.as_p }}, it just doesn't look how I want. Can anyone see an error in my loop, or is there something else wrong here. I have been looking for a solution online but so far been unsuccessful
You need to specify the names of the fields in your input tags otherwise the POST dictionary will be empty. You are using {% if field.name == 'login' %} but you forgot to specify the name attribute. Same applies for the password input.
<form class="login" method="POST" action="{% url 'account_login' %}">
{% csrf_token %}
{% for field in form.visible_fields|slice:'2' %}
<div class="row form-group">
{% if field.name == 'login' %}
<input name='login' type="text" placeholder="Email"><i class="fas fa-at"></i>
{% else %}
<input name='password' type="password" placeholder="Password"><i class="la la-lock"></i>
{% endif %}
</div>
{% endfor %}
Forgot Password?
<button type="submit">Sign In</button>
</form>

Change login label in Django auth form

I'm trying to change the login username label but without any success. Here is the website:
What I'd like to do is print "Usuário and e-mail" instead of just "Usuário" label:
I didn't customize the login form, in this way, I'm using all standard auth process.
#template
<form action="{% url 'login' %}" method="post">
{{ form.as_p }}
{% csrf_token %}
<input type="hidden" name="next" value="{{ next }}" />
<p><input type="submit" value="Login"></p>
</form>
If you guys have any suggestion modifying the input field through CSS style, it's welcome as well!
Thanks!
EDIT:
{% for field in form %}
<div class="fieldWrapper">
{% if field.label_tag == 'Usuário' %}
{% field.label_tag = 'Usuário ou e-mail:' %}
{% elif %}
{{ field.label_tag }}
{% endif %}
{{ field.label_tag }}{{ field }}
</div>
{% endfor %}
Value the label in the attribute form.

CSS definitions in django-allauth account templates

I am trying out django-allauth and have come across a block while customizing the allauth account templates. I am presently working on the emails.html template but I am unable to find any definition for the css classes used inside the default templates.
CSS classed such as ctrlHolder or primary_email. Please help me with figuring out where these are defined. I can use the bootstrap css but was hoping to keep the default ones if they are good enough.
accounts/emails.html
{% extends "account/base.html" %}
{% load i18n %}
{% block head_title %}{% trans "E-mail Addresses" %}{% endblock %}
{% block content %}
<h1>{% trans "E-mail Addresses" %}</h1>
{% if user.emailaddress_set.all %}
<p>{% trans 'The following e-mail addresses are associated with your account:' %}</p>
<form action="{% url 'account_email' %}" method="post">
{% csrf_token %}
<div class="form-group">
{% for emailaddress in user.emailaddress_set.all %}
<div class="ctrlHolder">
<label for="email_radio_{{ forloop.counter }}"
class="{% if emailaddress.primary %}primary_email{% endif %}">
<input id="email_radio_{{ forloop.counter }}" type="radio" name="email"
{% if emailaddress.primary or user.emailaddress_set.count == 1 %}checked="checked"{% endif %}
value="{{ emailaddress.email }}"/>
{{ emailaddress.email }}
{% if emailaddress.verified %}
<span class="verified">{% trans "Verified" %}</span>
{% else %}
<span class="unverified">{% trans "Unverified" %}</span>
{% endif %}
{% if emailaddress.primary %}<span class="primary">{% trans "Primary" %}</span>{% endif %}
</label>
</div>
{% endfor %}
<div class="buttonHolder">
<button class="secondaryAction" type="submit"
name="action_primary">{% trans 'Make Primary' %}</button>
<button class="secondaryAction" type="submit"
name="action_send">{% trans 'Re-send Verification' %}</button>
<button class="primaryAction" type="submit" name="action_remove">{% trans 'Remove' %}</button>
</div>
</div>
</form>
{% else %}
<p>
<strong>{% trans 'Warning:' %}</strong> {% trans "You currently do not have any e-mail address set up. You should really add an e-mail address so you can receive notifications, reset your password, etc." %}
</p>
{% endif %}
<h2>{% trans "Add E-mail Address" %}</h2>
<form method="post" action="{% url 'account_email' %}" class="add_email">
{% csrf_token %}
{{ form.as_p }}
<button name="action_add" type="submit">{% trans "Add E-mail" %}</button>
</form>
{% endblock %}
{% block extra_body %}
<script type="text/javascript">
(function () {
var message = "{% trans 'Do you really want to remove the selected e-mail address?' %}";
var actions = document.getElementsByName('action_remove');
if (actions.length) {
actions[0].addEventListener("click", function (e) {
if (!confirm(message)) {
e.preventDefault();
}
});
}
})();
</script>
{% endblock %}
Here I have my custom base page being called via the accounts base.html
{% extends "shared/base.html" %}
The class is not defined in allauth. It is there so that you can define it in your CSS. I guess the names are ctrlHolder and buttonHolder because they are placeholder class names for the input-control and button html statements.

Django: Redirect after posting a comment

I am trying to redirect the user back to the page where the comment was posted. I found this post on Django's site but I am doing something wrong because it won't redirect back.
Where should the input be placed to have it properly redirected?
{% load comments i18n %}
<form action="{% comment_form_target %}" method="post">{% csrf_token %}
{% if next %}<input type="hidden" name="next" value="{{ next }}" />{% endif %}
{% for field in form %}
{% if field.is_hidden %}
{{ field }}
{% else %}
{% if field.errors %}{{ field.errors }}{% endif %}
<input type="hidden" name="next" value="{% url proposal proposal.id %}" />
<p
{% if field.errors %} class="error"{% endif %}
{% ifequal field.name "honeypot" %} style="display:none;"{% endifequal %}
{% ifequal field.name "name" %} style="display:none;"{% endifequal %}
{% ifequal field.name "email" %} style="display:none;"{% endifequal %}
{% ifequal field.name "url" %} style="display:none;"{% endifequal %}
{% ifequal field.name "title" %} style="display:none;"{% endifequal %}>
<!-- {{ field.label_tag }} -->{{ field }}
</p>
{% endif %}
{% endfor %}
<p class="submit">
<!-- <button><input type="submit" name="post" value="{% trans "Send" %}" /></button> -->
<button type="submit">Send</button>
<!-- <input type="submit" name="preview" class="submit-preview" value="{% trans "Preview" %}" /> -->
</p>
</form>
Maybe you don't need to check for next variable in your template. You could try changing:
{% if next %}<input type="hidden" name="next" value="{{ next }}" />{% endif %}
to just:
<input type="hidden" name="next" value="/added/comment/page/" />
In case you use views.py, redirecting from there seems more obvious, at least for me, as it helps keep the concern away from the template:
from django.http import HttpResponseRedirect
HttpResponseRedirect("/path/to/redirect")
The problem with axel22's answer is that it requires a change to each template that requires the comment form - if you have multiple object types that can be commented on, this is not DRY.
Unfortunately, I'm also still looking for an answer that works.
if you are using {% render_comment_form for object %} tag in your template, just add something like {% url object's_named_view object.id as next %} or wrap it with {% with object.get_absolute_url as next %} ... {% endwith %} construction.
See my solution here: Django: Redirect to current article after comment post
It basically uses a view that's triggered by the comment post url which redirects back to the original referrer page.

Django: How to define "Next" within the Comments form

I am using the Django comments framework in two places on my site. After each submission, I'd like for the user to just be redirected back to the original page they were on.
How do you define the "next" variable so the user is redirected?
Information on the redirect : http://docs.djangoproject.com/en/dev/ref/contrib/comments/#redirecting-after-the-comment-post
Also, here is the form I am using. The comment.types do not work, but that is what I think I am supposed to do - define two different next inputs for each comment type (picture vs meal).
{% load comments i18n %}
<form action="{% comment_form_target %}" method="post">{% csrf_token %}
{% if comment.type == '19' %}
<input type="hidden" name="next" value="{% url meal comment.object_pk %}" />
{% endif %}
{% if comment.type == '23' %}
<input type="hidden" name="next" value="{% url picture comment.object_pk %}" />
{% endif %}
<!-- <input type="hidden" name="next" value="{{ next }}" /> -->
{% for field in form %}
{% if field.is_hidden %}
{{ field }}
{% else %}
{% if field.errors %}{{ field.errors }}{% endif %}
<p
{% if field.errors %} class="error"{% endif %}
{% ifequal field.name "honeypot" %} style="display:none;"{% endifequal %}
{% ifequal field.name "name" %} style="display:none;"{% endifequal %}
{% ifequal field.name "email" %} style="display:none;"{% endifequal %}
{% ifequal field.name "url" %} style="display:none;"{% endifequal %}
{% ifequal field.name "title" %} style="display:none;"{% endifequal %}>
<!-- {{ field.label_tag }} -->{{ field }}
</p>
{% endif %}
{% endfor %}
<p class="submit">
<button type="submit">Send</button>
<!-- <input type="submit" name="preview" class="submit-preview" value="{% trans "Preview" %}" /> -->
</p>
</form>
And then on the Meal & Picture pages I have:
<h4>Post a Message</h4>
{% render_comment_form for meal %}
<h4>Post a Message</h4>
{% render_comment_form for picture %}
Figured it out. To use the next with multiple objects, use an if statement.
{% if picture %}
<input type="hidden" name="next" value="{% url picture picture.id %}" />
{% endif %}
If you want to stay on the same page ajax is an option, you could use something like django_ajaxcomments, there are quite a few posts on others ways to do this with ajax.