Javascript提交错误的表单

Question

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

这里是相关代码sn-ps：

所以按钮的 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”中指定的表单，然后使用剩余的参数更新表单的值，然后提交。

最终发生的事情是我的浏览器控制台报告了正确的信息（form id = "formAddStage" 和 requestedAction = "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"