Html / jquery multiple forms submit

Question

I am working on Django File Sharing Project and in file view on click on file preview div it will pop-up modal with description of file . I have problems in IDing multiple forms

FileView.html


<div class="parent">
<div  class="child" onclick="fo()">
    <form class="form" method="post" action="django-script.py">
    <h5 > File.jpg</h5>
    <input type="hidden" name="file" value="file.jpg">
    <h6 class="title">Image</h6>
    <img class="image" src="/images/icons/file.png" >
     </form>
</div>

<div  class="child" onclick="fo()">
    <form class="form" method="post" action="django-script.py">
    <h5 > File.pdf</h5>
    <input type="hidden" name="file" value="file.pdf">
    <h6 class="title">PDF</h6>
    <img class="image" src="/images/icons/pdf.png" >
     </form>
</div>
<div  class="child" onclick="fo()">
    <form class="form" method="post" action="django-script.py">
    <h5 > File.csv</h5>
    <input type="hidden" name="file" value="File.csv">
    <h6 class="title">CSV FILE</h6>
    <img class="image" src="/images/icons/file.png" >
     </form>
</div>
</div>

script

function fo()
{
    document.querySelectorAll(".child")].forEach(child => {
     const forms= child.querySelector(".form")
     forms.submit();
 })
}

It works well only for 1 div I dont know how to make it for all div elements

Original Django Code ViewFile.html

<div class="parent">
 {% for f in file %}

<div  class="child" onclick="fo();">
    <form class="form" method="post" action="{% url 'fileview' %}">
        {% csrf_token %}
    <h5 >{{f.title}}</h5>
    <input type="hidden" name="file" value="{{f.filename}}">
    <h6 class="title">{{f.filename}}</h6>
    <img class="image" src="{% static '/images/icons/file.png' %}" >
     </form>
</div>

 {% endfor %}

</div>

Views.py

def fileview(request):
     global loginFlag,loginUser
     
     if request.method == 'POST':
         fil=request.POST['file']
         about=Transaction.objects.filter(filename=fil)
         emp=about[0].userid
         aname=Employee.objects.filter(emp_id=emp)[0].name
         print(about)
         files=Transaction.objects.all()
         name=loginName
         context={'files':files,'name':name,'about':about,'aname':aname}
         return render(request,'detailedview.html',context)
     else:    
         file=Transaction.objects.all()
         name=loginName
         context={'file':file,'name':name}
         return render(request, 'viewfile.html',context)

I think the issue is in HTML multiple form class. Any solutions will be of great help

Thanks inadvance

Kinglish · Accepted Answer · 2021-06-17 17:38:50Z

2

All your form tags have the same ID (which isn't what you want) and your onclick was instructing JS to submit the first matching ID, hence it was submitting the first form only. Instead make it a relative association. Use a JS function and pass this which will refer to the container element. Then in the function find the form inside the element and submit that.

<div class="parent">
 {% for f in file %}

<div class="child" onclick="showFile(this)">
    <form method="post" action="{% url 'fileview' %}">
        {% csrf_token %}
    <h5 >{{f.title}}</h5>
    <input type="hidden" name="file" value="{{f.filename}}">
    <h6 class="title">{{f.filename}}</h6>
    <img class="image" src="{% static '/images/icons/file.png' %}" >
     </form>
</div>

 {% endfor %}

<script>
  showFile(div) {
    div.querySelector('form').submit()
  }
</script>

edited Jun 17, 2021 at 17:38

answered Jun 17, 2021 at 17:30

Kinglish

23.7k4 gold badges25 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Html / jquery multiple forms submit

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related