I have a html
file that has several forms that can be submited independently, and I have a view that receives and manages these POSTs. I submit the forms programmatically, and I need to know in the view which of the forms is the one submitted. I tried by using a if 'form-name' in request.POST
, but it is not working.
This is the html file:
{% extends "StylingApp/base_site.html" %}
{% block title %} Álbumes {% endblock title %}
{% block stylesheets %}
{{ block.super }}
{% endblock stylesheets %}
{% block content %}
<div class="right_col" role="main">
<div class="">
<div class="page-title">
<div class="title_left">
<h3> Álbum: {{ album.name }}</h3>
<form method="POST" name ="new-files" id="new-files" enctype="multipart/form-data">
{% csrf_token %}
<div type="button" class="btn btn-success" id="add-photos"><span class="fa fa-photo"></span> Agregar</div>
<input type="file" name="file" id="select-photo-files" style="opacity:0" onchange="submitNewFiles()" multiple/>
<input type="submit" name="submit-new-files" value="" style="opacity:0"/>
</form>
</div>
<div class="title_right">
<div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Buscar...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Ir</button>
</span>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-md-12">
<div class="x_panel">
<div class="x_content">
<div class="row">
{% for photo in photos %}
<div class="col-md-55">
<div class="thumbnail">
<div class="image view view-first">
<img style="width: 100%; display: block;" src="{{ photo.photo.url }}" alt="image" />
<div class="mask no-caption">
<div class="tools tools-bottom">
<a href="{{ photo.photo.url }}"><i class="fa fa-link"></i></a>
<a href="#"><i class="fa fa-times"></i></a>
</div>
</div>
</div>
<div class="caption">
<p>{{ photo.description }}</p>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock content %}
{% block javascripts %}
{{ block.super }}
<script type="text/javascript">
var addPhotosButton = document.getElementById('add-photos');
var selectPhotoFilesInput = document.getElementById('select-photo-files');
var submitNewFilesInput = document.getElementById('submit-new-files');
var newFilesForm = document.getElementById('new-files')
addPhotosButton.addEventListener('click', function(event) {
selectPhotoFilesInput.click();
});
function submitNewFiles() {
newFilesForm.submit();
};
</script>
{% endblock javascripts %}
And this is the view:
class AlbumsListView(LoginRequiredMixin, View):
login_url = 'login'
def get(self, request, album_pk=None):
if album_pk == None:
context = self.populate_with_user_albums(owner=request.user)
else:
context = self.populate_with_album_content(album_pk=album_pk)
return render(request, 'AlbumsManagerApp/media_gallery.html', context)
def post(self, request, album_pk):
if 'new-files' in request.POST:
photos = request.FILES.getlist('file')
for photo in photos:
new_photo = Photograph()
new_photo.owner = request.user
new_photo.album = Album.objects.get(id=album_pk)
new_photo.photo = photo
new_photo.save()
return HttpResponseRedirect(self.request.path_info)
def populate_with_user_albums(self, owner):
albums = Album.objects.filter(owner=owner).values()
return {
'album_name': 'Mis Álbunes',
'albums': albums
}
def populate_with_album_content(self, album_pk):
album = Album.objects.get(id=album_pk)
photos = album.photos_of_album.all()
return {
'album': album,
'photos': photos
}