not able to POST required data in django templates - python-3.x

Question

I want to POST a form from my html to views.py in django, but I am not able do it.
This is my html. This form should post the url of the downloaded image to the views.py function.
{% for x in photo %}
<a class="down" href="{{x.image.url}}" onclick="myfunc()" download="none">get</a>
<form action="/image_info/" method="POST" id='dform'>
{% csrf_token %}
<input name='d_button' type="hidden" value="{{x.image.url}}">
</form>
{% endfor %}
This is my javascript function to submit form whenever the get link is pressed
<script type="text/javascript">
function myfunc()
{
document.getElementById("dform").submit();
console.log('hello');
}
</script>
this is my views.py. This should take the image url from the form and display it in the new page.
def show_image():
image_url = request.POST.get('d_button', None)
return render(request, 'show_image.html', {'image': image_url)
but my problem is that the form is not returning the url of the image that is clicked instead it is returning the url of first link. for example
link1
link2
link3
link4
if I click on link3, it is downloading the image in link3 but POSTING the url of link1.
This is a bit tricky to explain but this is the best I can.
Thanks in advance.

Answer 1

HTML ids are supposed to be unique. You are looping while generating these forms and hence generate a bunch of duplicate ids, so when you write document.getElementById("dform") the first matching element is selected.
One solution would be to use forloop.counter to generate unique ids and use them. We would set these ids as an attribute on the anchor and pass the anchor element to the onclick function:
{% for x in photo %}
<a class="down" href="{{x.image.url}}" onclick="myfunc(this)" data-target="dform-{{ forloop.counter }}" download="none">get</a>
<form action="/image_info/" method="POST" id='dform-{{ forloop.counter }}'>
{% csrf_token %}
<input name='d_button' type="hidden" value="{{x.image.url}}">
</form>
{% endfor %}
Now in your javascript:
<script type="text/javascript">
function myfunc(elem)
{
document.getElementById(elem.getAttribute("data-target")).submit();
console.log('hello');
}
</script>