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>

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

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”和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”表单中的button元素没有指定类型，因此默认为提交类型并提交“form-update-plan”表单。

试试这个：

<button type="button"

Javascript提交错误的表单

1 个答案: