javascript - 多个表单调用相同的 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。结果是“微调器”显示错误的表单(页面上的第一个表单)并且实际上没有提交任何表单。

Answer 1

表单提交的问题出在这一行:

document.forms.formId.submit();

如果您的表单实际命名为 "formId"，则此语法将起作用。但是，您有一个变量 formId 来保存相应的 id，因此您必须这样做:

document.forms[formId].submit();

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

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