JavaScript 提交错误的表单

Question

作为无法嵌套表单的解决方法，我编写了一个系统，该系统使用 Javascript 更新外部表单的隐藏输入值，然后提交表单。它在我网站的一个页面上运行良好，但由于某种原因它不在另一页面上。在浏览器的 JS 控制台中，我看到了要提交的表单的正确 ID，但服务器端不断显示不同的表单数据。

以下是相关代码片段:

因此按钮的 onclick 操作调用 JS 函数 updateAndSubmitForm () 来提交我想要为此按钮提交的实际表单(“formAddStage”)，而不是为周围的表单“form-update-plan”提交。

    <form id="form-update-plan" class="form-horizontal" action="/secure/treatment-components/EditTreatmentPlan" method="POST">
      <input type="hidden" name="requestedAction" value="plan-edit-update">
    ...
      <button role="button" class="btn btn-default btn-xs" title="Add a stage to this treatment plan." 
        onclick='updateAndSubmitForm("formAddStage", ${treatmentPlan.treatmentPlanID }, 0, 0)'> 
        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
      </button>
    ...
    </form>

这是表单“formAddStage”，位于包含按钮的表单外部的页面底部:

<form id="formAddStage" action="/secure/treatment-components/CreateStage" method="POST">
    <input type="hidden" name="requestedAction" value="add-stage-to-treatment-plan">
    <input type="hidden" name="path" value="${path }">  
    <input type="hidden" id="taskIDDynamic" name="taskID" value="" >
    <input type="hidden" id="stageIDDynamic" name="stageID" value="" >
    <input type="hidden" id="treatmentPlanIDDynamic" name="treatmentPlanID" value="${treatmentPlan.treatmentPlanID }">
    <input type="hidden" name="clientUUID" value="${clientUUID }" > 
</form>

这里的 JavaScript 通过提供的 ID 获取表单，使用提供的值获取并设置该表单中隐藏字段的值，然后提交。

function updateAndSubmitForm(formID, treatmentPlanID, stageID, taskID){
    var form = document.getElementById(formID);

    var inputTaskID = form.elements["taskIDDynamic"];
    inputTaskID.value = taskID;

    var inputStageID = form.elements["stageIDDynamic"];
    inputStageID.value = stageID;

    var inputTreatmentPlanID = form.elements["treatmentPlanIDDynamic"];
    inputTreatmentPlanID.value = treatmentPlanID;

    var requestedAction = form.elements["requestedAction"];
    console.log("Updating and submitting form " + form.id + " - requestedAction: " + requestedAction.value);
    //alert("Updating and submitting form " + formID + " - requestedAction: " + requestedAction.value);


    form.submit();
};

所以，总而言之，单击按钮应该调用 JS 函数 updateAndSubmitForm()，然后该函数获取方法参数“formID”中指定的表单，然后使用其余参数更新表单的值，然后提交。

最终发生的情况是，我的浏览器控制台报告了正确的信息(表单 id =“formAddStage”和 requestAction =“add-stage-to-treatment-plan”)，但服务器端报告从表单(id按钮周围的 ="form-update-plan")(例如 request.getParameter("requestedAction") 返回“plan-edit-update”而不是“add-stage-to-treatment-plan”。

关于为什么 JS 函数中的 form.submit() 似乎没有提交正确的表单或者为什么服务器得到不同的表单，有什么想法吗？

Answer 1

“form-update-plan”表单中的按钮元素没有指定类型，因此它将默认为提交类型并提交“form-update-plan”表单。

试试这个:

<button type="button"