htmlフォーム||フォームデータ|| AJAX

Question

出発点：私はこのような複数のフォームを持つサイトがあります：私はAJAX要求を保存]をクリックすると

<form class="form card-content-ingredients" action="" id="form-id-0" enctype="multipart/form-data"> 
      <ul> 
       <li class="form__item"> 
       <label class="form__label" for="name">Text</label> 
       <input class="form__input form__input--textfield" type="text" name="description" value="" placeholder="description"> 
       </li> 
       <li class="form__item"> 
       <label class="btn btn--invalid" for="file" >picture</label> 
       <input class="form__input form__input--file" id="file" type="file" name="img" value="picture"> 
       </li> 
       <ul class="form__item--multi-align-right"> 
       <li> 
        <input class="btn btn--invalid" type="button" value="cancel"> 
       </li> 
       <li> 
        <input class="btn btn--invalid btn__save" type="button" value="Save" data-item-id="0" data-rqstPath="/xyz"> 
       </li> 
       </ul> 
      </ul> 
      </form> 

は、ファイルを含むいるFormDataインターフェース内のすべてのデータを転送しています。

私の問題は、最初のフォーム要素のファイルのみが転送されていることです。他のフォームの場合はファイル入力フィールドは保存しませんが、他のすべての入力フィールドをクリックするとフィールドは含まれません。フォームの順序を変更しても、同じ効果があります。 私はこのようになりますFORMDATAを扱う1つのJS関数を使用します。誰かが私の問題で私を助けることができる場合

function updateSettingsAJAX(itemID, rqstPath) { 

     if (!(typeof itemID !== typeof undefined && itemID !== false) || 
      !(typeof rqstPath !== typeof undefined && rqstPath !== false)) { 
      return false; 
     } 

     var formData = new FormData($('#form-id-' + itemID)[0]); 


     formData.append("itemID", itemID); 

     return $.ajax({ 
      type: "POST", 
      url: rqstPath, 
      data: formData, 
      processData: false, 
      contentType: false, 
     }); 

が、私は本当に感謝されます。

Answer 1

これは、いくつかの修正（フォームでUNICのID）で、あなたのコードであり、それが正常に動作します： で私の提案の後にOPに代わって投稿https://jsfiddle.net/sk5j8qds/

<form class="form card-content-ingredients" action="" id="form-id-0" enctype="multipart/form-data"> 
<ul> 
    <li class="form__item"> 
     <label class="form__label">Text</label> 
     <input class="form__input form__input--textfield" type="text" name="description" value="" placeholder="description"> 
    </li> 
    <li class="form__item"> 
     <label class="btn btn--invalid" for="file_0" >picture</label> 
     <input class="form__input form__input--file" id="file_0" type="file" name="img" value="picture"> 
    </li> 
    <ul class="form__item--multi-align-right"> 
     <li> 
      <input class="btn btn--invalid" type="button" value="cancel"> 
     </li> 
     <li> 
      <input class="btn btn--invalid btn__save" type="button" value="Save" data-item-id="0" data-rqstpath="/echo/html/"> 
     </li> 
    </ul> 
</ul> 

<form class="form card-content-ingredients" action="" id="form-id-1" enctype="multipart/form-data"> 
    <ul> 
     <li class="form__item"> 
      <label class="form__label">Text</label> 
      <input class="form__input form__input--textfield" type="text" name="description" value="" placeholder="description"> 
     </li> 
     <li class="form__item"> 
      <label class="btn btn--invalid" for="file_1" >picture</label> 
      <input class="form__input form__input--file" id="file_1" type="file" name="img" value="picture"> 
     </li> 
     <ul class="form__item--multi-align-right"> 
      <li> 
       <input class="btn btn--invalid" type="button" value="cancel"> 
      </li> 
      <li> 
       <input class="btn btn--invalid btn__save" type="button" value="Save" data-item-id="1" data-rqstPath="/echo/html/"> 
      </li> 
     </ul> 
    </ul> 
</form> 
<script> 
function updateSettingsAJAX(itemID, rqstPath) { 
     if (!(typeof itemID !== typeof undefined && itemID !== false) || !(typeof rqstPath !== typeof undefined && rqstPath !== false)) { 
      return false; 
     } 

     var formData = new FormData($('#form-id-' + itemID)[0]); 


     formData.append("itemID", itemID); 

     return $.ajax({ 
      type: "POST", 
      url: rqstPath, 
      data: formData, 
      processData: false, 
      contentType: false, 
     }); 
    } 

    $(function() { 
     $('.btn__save').on('click', function() { 
      return updateSettingsAJAX($(this).data('item-id'),$(this).data('rqstpath')); 
     }); 
    }); 
</script> 

Answer 2

コメント;

ファイルの重複IDが<input>であるため、ラベルのトリガー入力フィールドが常に最初のフィールドをトリガーするという問題が発生しました。余談として

- それは古い標準ですが、にadhearingまだ価値が1 - ID's must be unique