Javascript: DOM have miltiple li and each li have a form, that form has to be submit wilh ajax

Question

I have a ul which contain multiple li and each li have a form with input type as file .

How might i can submit each form on on change() event of file selection.

Here is the code snipped of HTML

    <ul>
          <li>
            <form method="post" enctype="multipart/form-data" action="/listings/document" accept-charset="UTF-8"><div style="display:none"><input type="hidden" value="✓" name="utf8"><input type="hidden" value="Xou+i/Y9zwFvQP+AagO0agxeZSgUNlV5sln9xKeSowo=" name="authenticity_token"></div>
            <a class="delete-image" href="#"><i class="fa fa-times"></i></a><span class="myLabel">
            <!-- <input type="file" > -->
            <input type="file" name="[avatar]" id="_avatar_1">
          </span>
           </form>  
          </li>

          <li>
            <form method="post" enctype="multipart/form-data" action="/listings/document" accept-charset="UTF-8"><div style="display:none"><input type="hidden" value="✓" name="utf8"><input type="hidden" value="Xou+i/Y9zwFvQP+AagO0agxeZSgUNlV5sln9xKeSowo=" name="authenticity_token"></div>
            <a class="delete-image" href="#"><i class="fa fa-times"></i></a><span class="myLabel">
            <!-- <input type="file" > -->
            <input type="file" name="[avatar]" id="_avatar">
          </span>
          </form>   
         </li>

          <li>
            <form method="post" enctype="multipart/form-data" action="/listings/document" accept-charset="UTF-8"><div style="display:none"><input type="hidden" value="✓" name="utf8"><input type="hidden" value="Xou+i/Y9zwFvQP+AagO0agxeZSgUNlV5sln9xKeSowo=" name="authenticity_token"></div>
            <a class="delete-image" href="#"><i class="fa fa-times"></i></a><span class="myLabel">
            <!-- <input type="file" > -->
            <input type="file" name="[avatar]" id="_avatar">
          </span>
        </form>
        </li>

          <li>
            <form method="post" enctype="multipart/form-data" action="/listings/document" accept-charset="UTF-8"><div style="display:none"><input type="hidden" value="✓" name="utf8"><input type="hidden" value="Xou+i/Y9zwFvQP+AagO0agxeZSgUNlV5sln9xKeSowo=" name="authenticity_token"></div>
            <a class="delete-image" href="#"><i class="fa fa-times"></i></a><span class="myLabel">
            <!-- <input type="file" > -->
            <input type="file" name="[avatar]" id="_avatar">
          </span>
         </form>   
        </li>
          <li>
            <form method="post" enctype="multipart/form-data" action="/listings/document" accept-charset="UTF-8"><div style="display:none"><input type="hidden" value="✓" name="utf8"><input type="hidden" value="Xou+i/Y9zwFvQP+AagO0agxeZSgUNlV5sln9xKeSowo=" name="authenticity_token"></div>
            <a class="delete-image" href="#"><i class="fa fa-times"></i></a><span class="myLabel">
            <!-- <input type="file" > -->
            <input type="file" name="[avatar]" id="_avatar">
          </span>
        </form>  
       </li>
          <li>
            <form method="post" enctype="multipart/form-data" action="/listings/document" accept-charset="UTF-8"><div style="display:none"><input type="hidden" value="✓" name="utf8"><input type="hidden" value="Xou+i/Y9zwFvQP+AagO0agxeZSgUNlV5sln9xKeSowo=" name="authenticity_token"></div>
            <a class="delete-image" href="#"><i class="fa fa-times"></i></a><span class="myLabel">
            <!-- <input type="file" > -->
            <input type="file" name="[avatar]" id="_avatar">
          </span>
         </form>   
         </li>

Any help would be appreciate!!!

Answer 1

i dont know if you are using ajax why do you need different submits buttons to submit each form...you can use different events for those different buttons and take those datas you want to send to server using ajax and send them individually...