starting point: I have a site with multiple forms like this:
<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>
When I click save an AJAX request is made transferring all data in a FormData interface including the file.
My problem is: only the file from the first form element is getting transferred. For all other forms the file input field is not included when I click save, but strangely all other input fields. When I change the order of the forms, it still has the same effect. I only use one JS function dealing with the formdata, which looks like this:
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,
});
If someone could help me with my problem, I would be really grateful.
Posting on behalf of OP after my suggestion in the comments;
Duplicate ID's on the file
<input>
caused a problem whereby label's triggering input fields always triggered the first field.As an aside - it's an old standard but one still worth adhearing to - ID's must be unique