Javascript:DOM有多个li,每个li都有一个表单,该表单必须提交给ajax

时间:2015-05-31 10:26:26

标签: javascript jquery html ajax

我有一个ul,其中包含多个li,每个li都有一个输入类型为文件的表单。

我如何才能在on change()选择的event file上提交每个表单。

以下是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>

任何帮助都会很感激!!!           

1 个答案:

答案 0 :(得分:0)

我不知道你是否使用ajax为什么你需要不同的提交按钮来提交每个表单...你可以为这些不同的按钮使用不同的事件,并使用ajax将你想要发送到服务器的那些数据单独发送...