making one button trigger another in html

Issue

I have a button that lets user download a file, and I have a form that needs to POSTed whenever the user clicks on download button.

<a class="down" href="{{x.image.url}}" download="none">
     <button>get</button>
</a>
<form action="/image_info/" method="POST" id='image_form'>
    {% csrf_token %}
    <input name='info_button' type="hidden" value="{{x.id}}>
    <button class="imginfo" type="submit">info</button>
</form>

So, in this I want the image_form to be submitted and the image to be downloaded when the down button is pressed.Basically the imginfo submit button should be pressed when the download button is pressed.

Solution

Give an onclick event to the download button like this

    <a class="down" href="{{x.image.url}}" download="none"><button onclick="myfunc()">get</button></a>

now define a js function myfunc() to submit form whenever the download button is clicked

          <script type="text/javascript">
          function myfunc()
          {
            document.getElementById("dform").submit();
          }
        </script>

Answered By – Nithish Kumar

Answer Checked By – Robin (AngularFixing Admin)

Leave a Reply

Your email address will not be published.