多个表单调用同一个JavaScript函数

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。结果是，“旋转器”显示在错误的表单上（页面上的第一个），并且实际上没有提交表单。

- EndlessBeing

---

我复制了你的代码片段并复制了表单标记，更改了第二个表单中所有ID的最后一位数字。对我来说它按预期工作。显然的事情是在onchange事件中检查submitForm调用中的参数，但我假设你已经这样做了。你能发布一个包含多种格式的片段，以便实际重现错误吗？ - Mic

这一行看起来不对：return document.forms.formId.submit();。可能应该是 return document.forms[formId].submit();。但不确定这是否是你的根本问题。 - Noah Freitas

你的示例中只有一个表单，因此很难看出旋转器问题来自哪里。表单提交的问题是由@Noah Freitas指出的。 - lex82

我自己解决了。请看下面的答案。 - EndlessBeing

Answer 1

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

document.forms.formId.submit();

如果您的表单实际上被命名为"formId"，则此语法将起作用。但是，您实际上有一个包含相应ID的变量formId，因此您必须像这样进行操作：

document.forms[formId].submit();

也许当您看到变量仅替换实际名称时，它会变得更清晰。这也适用于访问特定表单：

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

- lex82

Answer 2

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

- EndlessBeing