I am having problem with setting up logic for if statement in HTML template with Jinja.
What should I input in place of ??? in the below code?
I don't want the user to be able to post empty field, therefore, I have decided to disable the submit button while the textarea is empty (e.g.: it has different css style with the form__submit__disabled class).
I have tried inputting in the ??? place content, entry, form__textarea, but it doesn't work.
<form class="form" action="/" method="POST">
<p class="form__input">
<textarea name="content" id="entry" class="form__textarea" aria-label="Entry contents" placeholder="Type here..."></textarea>
</p>
{% if ??? is none %}
<button type="submit" class="form__submit__disabled" disabled>Add entry</button>
{% else %}
<button type="submit" class="form__submit">Add entry</button>
{% endif %}
</form>
A better idea, for this requirement would be to use the required attribute of the textarea, and let the browser do the job of warning the end user that this field should be filled in before submitting.
<form class="form" action="/" method="POST">
<p class="form__input">
<textarea name="content"
id="entry"
class="form__textarea"
aria-label="Entry contents"
placeholder="Type here..."
required></textarea>
</p>
<button type="submit"
class="form__submit">
Add entry
</button>
</form>
Related
I want to prefill a form with already existing database entries but can't access the correct ones.
A user can create a task and pass information on when creating it. When he wants to update it later, the already saved information should be used to prefill the form.
My problem is, that I'm inside a for-loop and it seems that I can't access the elements of the loop.
Here is what I'm doing:
I'm in a template inside a for-loop. The loop lists all tasks with an update button for every task. This button calls a form via the bootstrap data-target. Here's an example:
{% for task in tasks %}
<button class="btn-primary btn-block btn-lg" data-toggle="modal" data-target="#updateTask">Update Task</button> {% endfor %}
In my upcoming form I can't use the variables from the task element. For example the task.taskname. However, I can use all other variables like the user.first_name which exists outside the loop.
<div class="modal-body">
<form method="POST" action="{% url 'update_task' %}">
{% csrf_token %}
<div class="form-row">
<div class="form-group col-md-6">
<label for="name" class="col-form-label">Task:</label>
<input type="text" id="taskID" name="task" class="form-control" value="{{ user.first_name }}" required> -> this works
<input type="text" id="taskID2" name="task2" class="form-control" value="{{ task.taskname }}" required> -> this doesn't
</div>
<input type="submit" value="Send" class="btn btn-block custom-button">
</div>
I know I could do this with opening a completely new page but I want to try to use the data-target calling my view instead of calling the view directly.
Is there any way to pass my currently looped element to the form?
Thanks in advance!
Pascal
This is the form that appears if I donot use crsipy form.But, if I use crispy forms, the radio button disappears, anyone have any idea??
As shown above, if crispy form is used, the radio button now disapperas.what is the issue??
<form method="POST">
{% csrf_token %}
{{ form|crispy }}
<button type="submit" class="btn btn-success" formaction="{% url 'addcustomer' %}">Submit</button>
<button class="btn btn-primary" formaction="{% url 'customerlist' %}">Cancel</button>
</form>
I am trying to get a value from template to views.py of a django project. I am able to get the value of name="city" correctly but unable to get the exact value of name="category" in my views, instead I am getting the first element value for all the other elements in the loop. An idea to solve this will be very much helpful.
#category.html
{% for test in mytypes %}
<form id="myform" action="{% url 'my_city_category' %}" method="POST">
{% csrf_token %}
<a href="javascript: submitform()">
<div class="col-6 col-lg-3 col-md-4 col-sm-6 col-xl-2 hover-box mt-2 text-center">
<div class="pb-1 pt-2">
<img src="{{test.icon_image.url}}" width="100"/>
<h6 class="mt-3 text-body text-capitalize text-decoration-none">{{ test.category_type }}</h6>
<input type="hidden" name="category" value="{{ test.category_type }}"># unable to repeat the value while calling it in the views, stuck at the first value
<input type="hidden" name="city" value="{{ city }}"> #rendering the exact value
</div>
</div>
</a>
</form>
{% empty %}
<h6 class="mt-3 text-body text-capitalize text-decoration-none">No Categories Listed</h6>
{% endfor %}
#views.py
def City_specific_page(request):
city = request.POST.get('city')
category = request.POST.get('category')
business= Business.objects.filter(city__City=city, type__category_type=category)
return render(request, 'community_app/type_detail_city.html',{'business':business,'category':category,'city':city})
#urls.py
path('City', views.City_specific_page, name='my_city_category'),
Each <form> in your template includes the following tag:
<a href="javascript: submitform()">
I suspect that your submitform function is submitting the first form on the page, rather than the one that was clicked.
You can quickly determine if this is the problem by adding a submit button inside your <form> tags. Make sure it's not inside the <a> tags, eg:
<form id="myform" action="{% url 'my_city_category' %}" method="POST">
{% csrf_token %}
<button type="submit">Test</button>
<a href="javascript: submitform()">
<!-- the rest of your form code -->
Click the button labelled 'Test' to see if the correct form data is submitted.
I have this HTML page in which I have 2 forms. Django is not checking the form validation for the first form. I want it to check form validation for the first form.
This is the Html Code
<form method="post" id="msform">
{% csrf_token %}
<!-- progressbar -->
<ul id="progressbar">
<li class="active" id="conf"><strong>Configuration</strong></li>
<li id="auth"><strong>Authentication</strong></li>
</ul>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
</div> <br> <!-- fieldsets -->
<fieldset>
<div class="form-card">
<div class="row">
<div class="col-7">
<h2 class="fs-title">Cluster Configuration</h2>
</div>
<div class="col-5">
<h2 class="steps">Step 1 - 2</h2>
</div>
</div>
{{ form1|crispy }}
</div> <input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<div class="form-card">
<div class="row">
<div class="col-7">
<h2 class="fs-title">Authentication</h2>
</div>
<div class="col-5">
<h2 class="steps">Step 2 - 2</h2>
</div>
</div>
{{ form2|crispy }}
</div><button type="submit" class="btn btn-primary" >Next</button>
</fieldset>
</form>
If I use submit button instead of next for the first form then neither the second form opens nor the form is submitted (i.e. nothing is happening).
So I think the issue might be because you have over arching form tag, and two forms sent inside it from your view function:
What you have right now is this:
<form>
<fieldset>
<! –– Your Code ––>
{{ form1|crispy }}
</div> <input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<! –– Your Code ––>
{{ form2|crispy }}
</div><button type="submit" class="btn btn-primary" >Next</button>
</fieldset>
</form>
As you can see from the above simplification of your original post, you have two forms templated inside one form tag. Thus when you hit either of the the submit button both of them gets sent.
If I am not mistaken, I believe what you might want is something along the lines of this:
<form name="form1" id="form1">
<fieldset>
<! –– Your Code ––>
{{ form1|crispy }}
</div> <input type="button" name="form1" class="next action-button" value="Next1" />
</fieldset>
</form>
<form name="form2" id="form2">
<fieldset>
<! –– Your Code ––>
{{ form1|crispy }}
</div> <input type="button" name="form2" class="next action-button" value="Next2" />
</fieldset>
</form>
Take note of the fact that I have changed your button names, as well as added ids and names to each form, you might also want to add ids as well as unique values to your buttons as well. This would help you build if conditions to determine which form has been submitted and so on, in your view function
Here is a link that describe how to handle this in more depth.
Which is all nice and dandy, but the conclusion of that linked page is this:
Let me know if it helps, feel free to ask more if you do not understand/the changes does not work
In my Django template, {{ form.ietf_tag|bootstrap }} renders as
Django rendering
<div class="form-group">
<label class="control-label " for="id_ietf_tag">IETF tag</label>
<div class=" ">
<input class=" form-control" id="id_ietf_tag" maxlength="12" name="ietf_tag" type="text">
</div>
</div>
I want to insert a <button> before <input>, so I figured I'll just copy, paste, and modify the rendered HTML to where it looks something like this:
Manual rendering
<div class="row">
<div class="col-md-6">
<form action="" method="post">
{% csrf_token %}
<!-- Manually render ietf_tag input -->
<div class="form-group flex {% if form.ietf_tag.errors %}has-error{% endif %}">
<label for="{{ form.ietf_tag.id_for_label }}" class="control-label">{{ form.ietf_tag.label }}</label>
<div class=" ">
<button class="btn btn-primary get-code" data-url="{% url 'ajax_temporary_code' %}">Get Code</button>
<input id="{{ form.ietf_tag.id_for_label }}" class="form-control temp-code required" maxlength="12" name="{{ form.ietf_tag.html_name }}1" type="text" disabled value="{{ form.ietf_tag.value|default:"-" }}">
</div>
<span class="help-block">{{ form.ietf_tag.errors.0 }}</span>
</div>
<!-- -->
{{ form.common_name|bootstrap }}
{{ form.native_name|bootstrap }}
{{ form.direction|bootstrap }}
{{ form.comment|bootstrap }}
<button type="submit" class="btn btn-primary pull-right">Create</button>
</form>
</div>
</div>
The problem
On <form> submission, everything else is submitted except the ietf_tag, which I manually rendered.
QueryDict: {u'common_name': [u''], u'comment': [u''], u'csrfmiddlewaretoken': [u'G6UP5DxrSHHPPQzj6SbxM06Hh8yT9ksm'], u'direction': [u'l'], u'native_name': [u'']}
I double check the name attribute and it was correct. There was no problem using Django-rendered input.
Why is this happening?
Maybe I can accomplish the same result without having to copy, paste, and modify the HTML directly in the template?
EDIT: Put more context in the HTML code
Silly me. The disabled attribute in <input> is what causes the problem. I removed it and now the value is included in the form submission.
Lesson learned
If your <input> is disabled, the value won't be submitted by the form.