Question

我有一个页面，其中有多个表单调用相同的javascript函数。每个表单将图片发布到给定的数据库项，并具有引用该数据库项的ID（例如id =“form123”）。当用户选择图片时，他们应该得到一个“微调器”（表示文件上传），然后表单应该提交。

问题是，无论哪种形式获得onchange事件（从客户端选择图片），浏览器总是为页面上的“onchange”传递第一个表单的变量。

function submitForm(formId, spinner) {
    console.log(formId);
    console.log(spinner);
    setDisplay(document.getElementById(spinner), 'inline-block');
    return document.forms.formId.submit();
};

function setDisplay(element, value) {
    return element.style.display = value;
};

<form method="post" name="form28236" id="form28236" class="submit-image" action="/image/new" enctype="multipart/form-data">
   <input type="hidden" name="on" value="28236">
   <label for="image-file">Add photos</label>
   <input type="file" id="image-file" name="image" onchange="submitForm('form28236', 'spinner28236')">
   <div id="spinner28236" class="spinner"></div>
</form>

Console:
form28330
spinner28330

请注意，控制台未记录应传递给javascript函数的相同表单ID或微调器ID。结果是“spinner”显示错误的表单（页面上的第一个），并且实际上没有表单提交。

Answer 1

表单提交的问题在这一行：

document.forms.formId.submit();

如果您的表单实际上名为"formId"，则此语法将有效。但是，你有一个变量formId来保存相应的id，所以你必须这样做：

document.forms[formId].submit();

当您看到您的变量仅替换实际名称时，可能会更清楚。这也可以访问特定的表单：

document.forms['form28236'].submit();

Answer 2

所以问题是我没有<input type="file">和相应的<label for="unique-id">的唯一ID。我使用<label>作为输入按钮（并隐藏输入）。但由于它不是唯一的ID，因此浏览器只会在页面上显示带有该ID的第一个<input>。

多个表单调用相同的javascript函数

2 个答案: