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
Related
Here i am trying to pass the value outside for loop modal using ajax
here is my template.html
{% for compliance in compliance %}
{% complience_category compliance request.user as compliances %}
{% for qualification in compliances %}
.....
.....
<td>
<button data-id="{{ qualification.id }}" type="button" class="btn btn-warning margin-bottom edit-qualification">
edit
</button>
</td>
....
.....
{% endfor %}
{% csrf_token %}
<div class="modal hid fade" id="modal-default">
<form class="form-horizontal" method="POST" enctype="multipart/form-data" action=" {% url 'update_qualifications' qualification.id %}">
{% csrf_token %}
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Update Compliance</h3>
</div>
<div class="modal-body">
<div class="control-group">
<label class="control-label" for="inputdate_{{qualification.id}}">Expiry Date</label>
<div class="controls">
<input type="date" id="inputdate_{{qualification.id}}" name="expiry_date" value="{{qualification.expiry_date|date:'Y-m-d'}}">
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Close</button>
<button class="btn btn-primary" type="submit">Save</button>
</div>
</form>
</div>
{% endfor %}
This is my AJAX
$(document).on('click','.edit-qualification',function(){
var id = $(this).data('id');
$.ajax({
url:'',
type:'POST',
data:{
'id':id,
'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val(),
},
success:function(data){
$('#edit_modal .modal-dialog').html($('#edit_modal .modal-dialog',data));
$('#edit_modal').modal('show');
},
error:function(){
console.log('error')
},
});
});
</script>
Here my modal is outside of for loop
Here my problem is when i click the edit button my modal popup is not working (it means when clicking the edit button nothing works for me )
Here my modal is outside of for loop
From the looks of this, the modal is still inside of a for loop.
{% for compliance in compliance %}
...
...
# your modal is here...
{% endfor %}
I'd suggest placing the modal outside of the loop.
Another thing to note is that using Ajax here is really unnecessary unless I'm not understanding what's your purpose for using it.
However, for the edit button, I'd suggest that you add two attributes; data-toggle and data-target. Example:
<button data-toggle="modal" data-target="#myModal">
edit
</button>
In your case, you have for the modal div an id: id="modal-default". This should be assigned to your button's data-target attribute. data-target="#modal-default".
So what you should have instead for the edit button is:
<button data-toggle="modal" data-target="#modal-default" data-id="{{ qualification.id }}" type="button" class="btn btn-warning margin-bottom edit-qualification">
edit
</button>
Ideally, that should work to display the modal.
As for the question of how to pass the values to the modal if a specific edit button is clicked, then I'd suggest you see this answer here as it might be very useful.
I want to use input field for authentication but if I search for authentication tutorial they are using built-in Django forms which I can't design it using html
You can customize how forms are rendered or you can pretty much write any HTML that you want just make sure your input name attributes match whatever you are accepting on backend.
Here's an example using Bootstrap 4 for styling. Start out by creating a view that subclasses LoginView. In the html file, instead of using {{ form }} or {{ form.username }} & {{ form.password }}, you can supply your own html for the fields. Just make sure your inputs are named the same as in {{ form }}.
views.py:
from django.contrib.auth.views import LoginView
class MyLoginView(LoginView):
template_name = 'login.html'
login.html:
{% block content %}
...
<div id="login-row" class="row justify-content-center align-items-center">
<div id="login-column" class="col-md-6">
<div id="login-box" class="col-md-12">
<form id="login-form" class="form" action="" method="post">
{% csrf_token %}
<div class="form-group">
<label for="username" class="text-white">Username:</label><br>
<input type="text" name="username" id="username" class="form-control" required>
</div>
<div class="form-group">
<label for="password" class="text-white">Password:</label><br>
<input type="password" name="password" id="password" class="form-control" required>
</div>
<div class="form-group">
<input type="submit" name="login" class="btn btn-light btn-md btn-block mt-5"
value="log in">
</div>
</form>
</div>
</div>
</div>
...
{% endblock content %}
I have the following form, which when pressed doesn't submit.
<div class="ui form" method="post" action="{{ url_for('filter_ui_data_sources') }}">
<div class="fields">
{{select(argument1, argument2, ...)}}
<div class="six wide field">
<button type="submit" class="ui primary button" name="submit_button"><i class='search icon'></i> Filter data sources</button>
</div>
</div>
</div>
The select is just a macro that yields a multiselection search box.
This is the method it should call, but never gets here.
#app.route("/ui/data_sources", methods=["POST"])
def filter_ui_data_sources():
return something
Any ideas?
You need to put your form in actual form tags:
<form class="ui form" method="post" action="{{ url_for('filter_ui_data_sources') }}">
<div class="fields">
{{select(argument1, argument2, ...)}}
<div class="six wide field">
<button type="submit" class="ui primary button" name="submit_button"><i class='search icon'></i> Filter data sources</button>
</div>
</div>
</form>
This is some code from my index.html. My issue is that the action on the form in the modal is not working (no error, just doing nothing) yet the form outside the model is working fine (commented test button). The model is opening fine and seems correctly formatted, yet the 'yes' button does nothing but closes the modal. The problem does not seem to be in the URL. Any help would be much appreciated. I am using django by the way
{% for patient in all_patients %}
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-body">
<!-- Name -->
<h4>{{ patient }}</h4>
<!-- View Details -->
View Details
<!-- Edit Details -->
Edit Details
<!-- Delete Patient -->
<input type="hidden" name="patient_id" value="{{ patient.id }}" />
<button type="submit" class="btn btn-default btn-sm" data-toggle="modal" data-target="#patient_id">
<span class="glyphicon glyphicon-trash"></span>
</button>
<!-- Modal -->
<div class="modal fade" id="patient_id" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Confirm delete</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to delete {{ patient }}?</p>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default" data-dismiss="modal">No</button>
<form action="{% url 'patients:patient-delete' patient.id %}" method="post" style="display: inline;">
{% csrf_token %}
<button type="submit" class="btn btn-danger" data-dismiss="modal">Yes</button>
</form>
</div>
</div>
</div>
</div>
<!-- test button -->
<form action="{% url 'patients:patient-delete' patient.id %}" method="post" style="display: inline;">
{% csrf_token %}
<button type="submit" class="btn btn-danger" data-dismiss="modal">Delete</button>
</form>
</div>
</div>
</div>
{% cycle '' '' '' '' '' '<div class="clearfix visible-lg"></div>' %}
{% endfor %}
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.