i'm trying to submit more than one form with one button using this as an example.
The difference is that i'm adding forms dynamically using this code:
{% load crispy_forms_tags %}
<form method="POST" action="{% url 'App:Submit' %}">
{% csrf_token %}
{% for form in forms %}
<h3>Hour {{ form.Hour }}: </h3>
<form>
{% csrf_token %}
{{ form|crispy }}
</form>
<br>
{% endfor %}
<br>
<div class="col text-center">
<button class="btn btn-primary" type="submit">Send</button>
</div>
</form>
Using this example, in Chrome, the main <form> tag with the action closes after the first loop.
Any idea why this is happening? Thanks
Related
I would like to disable my button until a file is uploaded, how can I do this?
my html code
{% extends 'base.html' %}
{% block content %}
<center>
<h1>Upload your file</h1>
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
<label class="custom-file-upload">
<input type="file" name="document"><br/>
</label>
<button class="button button1" type="submit">Upload file</button>
</form>
{% if url %}
<p>Uploaded file: {{ url }}</p>
{% endif %}
{{ return_value }}
</center>
{% endblock %}
I have spent half a day trying to figure this out. I ended up passing the CSS through the HTML style attribute. What have I done and tried:
In settings.py I have included:
django.contrib.staticfiles
STATIC_URL = '/static/'
In layout.html:
{% load static %}
<link href="{% static 'auctions/styles.css' %}" rel="stylesheet">
The static files folders are organized the following:
app_name/static/auctions/styles.css
4. And extending the layout and filling the body block
I have tried adding {% load static %} on top;
I have put <link href="{% static 'auctions/styles.css' %}" rel="stylesheet"> afterwards and restarted the server, yet all this to no avail;
Template:
{% extends "auctions/layout.html" %}
{% load humanize %}
{% load crispy_forms_tags %}
{% block body %}
{% if listing.closed == True %}
<div style="background-color: whitesmoke; height: 110%; width: 100%; position: absolute; opacity: 0.6; z-index: 2;">
<div style="margin-top: 30%; font-size: xxx-large;">
<center>
<strong>
This listing is closed. <br>
<p style="color: green;">{% if request.user == winner.user %} You ({{ winner.user }}) have Won the auction! Congrats! {% endif %}</p>
</strong>
</center>
</div>
</div>
{% endif %}
{% if error_check == True %}
<div class="alert alert-warning" role="alert">
<center>
Your bid is lower than the current bid! Try with a higher one.
</center>
</div>
{% elif error_check == False %}
<div class="alert alert-success" role="alert">
<center>
Your bid was successfully placed!
</center>
</div>
{% endif %}
<div>
<div>
{% if button %}
<form method="POST" action="{% url 'view_list' listing.id %}">
{% csrf_token %}
<input type="hidden" name="close_list" value="True">
<input type="submit" class="btn btn-success" value="Close the Auction">
</form>
{% endif %}
</div>
<div>
{% if not watchlisted or watchlisted.watchlist == False %}
<form method="POST" action="{% url 'view_list' listing.id %}">
{% csrf_token %}
<input type="hidden" name="watchlist_add" value="True">
<input type="submit" class="btn btn-primary" value="Add to Watchlist">
</form>
{% else %}
<form method="POST" action="{% url 'view_list' listing.id %}">
{% csrf_token %}
<input type="hidden" name="watchlist_add" value="False">
<input type="submit" class="btn btn-primary" value="Remove from Watchlist">
</form>
{% endif %}
</div>
<h3>Listing: {{ listing.title }}</h3>
<img src="{{ listing.image }}" alt="Listings' Images">
<p>{{ listing.description }}</p>
{% if not bid %}
<strong>${{ listing.price|stringformat:"1.2f" }}</strong>
{% else %}
<strong>${{ bid|stringformat:"1.2f" }}</strong>
{% endif %}
<p> {{ total_bids }} bid(s) so far. {% if bid_user %} {{ bid_user }} {% endif %}</p>
<form method="POST" name="bidding" action="{% url 'view_list' listing.id %}">
{% csrf_token %}
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<div style="margin: 0; padding: 0 2px; height: 6px; z-index: 1;">
{% crispy form %}
</div>
<div class="input-group-append" >
<span class="input-group-text">.00</span>
</div>
<input type="submit" class="btn btn-primary" value="Place Bid">
</div>
</form>
<div style="width: 222;">
<form action="{% url 'view_list' listing.id %}" name="comment" method="POST">
<input type="submit" class="btn btn-secondary btn-sm" value="Comment">
{% crispy comment %}
</form>
<div>
{% for c in comments %}
<ul>{{ c.user }}: {{ c.comment }} {{c.created_at}}</ul>
{% empty %}
No comments yet.
{% endfor %}
</div>
</div>
<h4>Details</h4>
<li>Listed by: {{ listing.user }} </li>
<li>Category: {{ listing.category }} </li>
<li>Listing created at: {{ listing.created_at }} </li>
</div>
{% endblock %}
in your main_urls ensure to include the following
from django.contrib.staticfiles.urls import static,staticfiles_urlpatterns
urlpatterns += staticfiles_urlpatterns()
urlpatterns += static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)
urlpatterns += static(settings.STATIC_URL,document_root=settings.STATICFILES_DIRS)
this tell points django to look for static file in a given url for static
The problem was with the browser and particularly with the cache...
I created a sign up form by extending Django's UserCreationForm. Since Django adds all HTMLs by default I can't put my own HTML in it, just to customize it a bit.
This is how my current signup form looks like:
you can see password and password confirmation are added one after another. I would like to show them side by side, something like this:
I don't know where to add my HTML to make it look like the one above, this is my signup.html here:
{% block content %}
<form action="." method="POST" class="signup">
<h4 class="display-6 bg-secondary text-white p-3">Create your account</h4>
{% csrf_token %}
{{ form|crispy }}
<input type="submit" value="Sign up" class="btn btn-primary btn-block">
<p class="display-6 bg-signup p-3">Have an account Sign In</p>
</form>
{% endblock content %}
No one answered my question within last 36 hours. Finally just now I find an answer to my own question. So I am answering my own question, maybe someone in the future read it and find it useful.
After adding my custom HTML and CSS I finally manage to show two password fields side by side like this:
I used django-widget-tweaks to achieve this result:
as you can see in above picture, two password fields are added side by side. Moreover, errors are shown as well.
this was the previous html form:
{% block content %}
<form action="." method="POST" class="signup">
<h4 class="display-6 bg-secondary text-white p-3">Create your account</h4>
{% csrf_token %}
{{ form|crispy }}
<input type="submit" value="Sign up" class="btn btn-primary btn-block">
<p class="display-6 bg-signup p-3">Have an account Sign In</p>
</form>
{% endblock content %}
Now the HTML codes look like this one below, the code pretty much explains itself. So I don't feel to elaborate it. I used bootstrap 4.
{% block content %}
<div class="accountform">
<form method="POST">
<h4 class="display-6 text-white p-3">Create your account</h4>
{% csrf_token %}
<div class="alert alert-danger p-0" style="border:none;">
{% for field in form.visible_fields %}
{% for error in field.errors %}
<span class="err">{{ error }}</span><br>
{% endfor %}
{% endfor %}
</div>
<div class="form-group">
<label for="id_username">Username</label>
{% render_field form.username class='form-control' placeholder='John Doe' %}
</div>
<div class="form-group">
<label for="id_email">Email</label>
{% render_field form.email class='form-control' placeholder='johndoe#email.com' %}
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="id_password1">Password</label>
{% render_field form.password1 class='form-control' placeholder='****' %}
</div>
<div class="form-group col-md-6">
<label for="id_password2">Confirm Password</label>
{% render_field form.password2 class='form-control' placeholder='****' %}
</div>
</div>
<input type="submit" value="Sign up" class="btn btn-primary btn-block">
<p class="display-6 bg-signup p-3">Have an account Sign In</p>
</form>
</div>
</div>
{% endblock content %}
dont' forget to add {% load widget_tweaks %} at the top of your template.
Thanks
I don't know why my code is not submitting. I search on the internet and cannot find any solution.
{% extends 'root/base.html' %}
{% block title %}{{title}}{% endblock %}
{% block body %}
<div class="container">
<div class="row">
<div class="col-md-6">
<form method="post" action="{% url 'shopapp:signup' %}">
{% csrf_token %}
{% for field in form %}
{{field.label}}
<p>{{field}}</p>
{% endfor %}
<p><input type="submit" value="Signup" class="btn btn-danger"></p>
</form>
</div>
</div>
</div>
{% endblock %}
I can not submit the forms if extends from top html,if i delete {% extends 'accounting/password_reset_base.html' %}, the form can submit and send email, please help to fix this, thanks
{% extends 'accounting/password_reset_base.html' %}
{% load static%}
{% block headertitle_password %}
Forgot Your Password ?
{% endblock %}
{% block passwordbase %}
<div class="container">
<md-card>
<div class="container_password">
<form method="post">{% csrf_token %}
<div>
<input id="id_email" maxlength="254" name="email" type="email" />
</div>
<button type="submit" >Reset my password</button>
</form>
</div>
</md-card>
</div>
{% endblock %}