未使用 Javascript 提交表单答案

【问题标题】：Form is not Submitted with Javascript未使用 Javascript 提交表单
【发布时间】：2015-04-24 04:53:16
【问题描述】：

我正在开发一个 Spring Web 应用程序。在前端我使用JSP.我在jsp中有一个表单（id为formToSubmit） -

<form:form id="formToSubmit" modelAttribute="jobForm" >
    <table>

        <tr>
            <td valign="top"><label>Your Comments:</label></td>
            <td>
                (Required if you do not review the samples)<br />
                <form:textarea id="newCommentsTextAreaId" path="newComments" rows="5" cols="50" />
            </td>
        </tr>

        <tr>
            <td colspan="2">
                <br />
                <input onclick="apprvRqstSbmt()"type="image" src="/images/buttons/approveBtn.png" /><br />
                <br />
            </td>
        </tr>

        <tr>
            <td colspan="2">
                <br />
                <input onclick="disApprvRqstSbmt()" type="image" src="/images/buttons/disApproveBtn.png" />
                <br/>
            </td>
        </tr>
    </table>
</form:form>

此表单有两个按钮 - 一个用于批准（使用 apprveBtn.png），另一个用于拒绝（使用 disApproveBtn.png）。所以我写了一些javascript 在按钮点击时提交表单 -

<script type="text/javascript">

    function apprvRqstSbmt(){

        $("#formToSubmit").attr("action","/some/url/to/submit");
        $("#formToSubmit").submit();
    }

    function disApprvRqstSbmt(){
        $("#formToSubmit").attr("action","/some/url/to/submit");
        $("#formToSubmit").submit();
    }

</script>

当我单击拒绝按钮时，表单已正确提交。但是当我点击批准按钮时，表单没有正确提交。谁能帮助我为什么表单没有正确提交？

【问题讨论】：

添加了答案。请让我知道它是否有效，或者如果我没有正确理解问题，请向我解释问题所在。

标签： java javascript html forms jsp

【解决方案1】：

刚刚删除了:form，我不明白为什么有必要。

另外，感谢 Razib，除了 :form 部分是不必要的，您忘记将方法设置为 POST，因此您可以将其添加到 javascript 部分或 HTML 中。如您所见，我在两者中都做过。您只能使用其中一种。

    function apprvRqstSbmt(){
        $("#formToSubmit").attr("method","POST");  //Razib solution
        $("#formToSubmit").attr("action","/some/url/to/submit");
        $("#formToSubmit").submit();
    }

    function disApprvRqstSbmt(){
        $("#formToSubmit").attr("method","POST");  //Razib solution
        $("#formToSubmit").attr("action","/some/url/to/submit");
        $("#formToSubmit").submit();
    }

    <form id="formToSubmit" modelAttribute="jobForm" method="POST" >
        <table>
    
            <tr>
                <td valign="top"><label>Your Comments:</label></td>
                <td>
                    (Required if you do not review the samples)<br />
                    <form:textarea id="newCommentsTextAreaId" path="newComments" rows="5" cols="50" />
                </td>
            </tr>
    
            <tr>
                <td colspan="2">
                    <br />
                    <input onclick="apprvRqstSbmt()"type="image" src="/images/buttons/approveBtn.png" /><br />
                    <br />
                </td>
            </tr>
    
            <tr>
                <td colspan="2">
                    <br />
                    <input onclick="disApprvRqstSbmt()" type="image" src="/images/buttons/disApproveBtn.png" />
                    <br/>
                </td>
            </tr>
        </table>
    </form>

JSFiddle：http://jsfiddle.net/6fp1ukzL/

【讨论】：

【解决方案2】：

我认为您缺少javascript 中的'method' 属性。您必须在您的javascript 中添加attr("method", "POST")。如果我用我的更改重写你的代码，那么它将是 -

<script type="text/javascript">

    function apprvRqstSbmt(){
        $("#formToSubmit").attr("method","POST");               
        $("#formToSubmit").attr("action","/some/url/to/submit");
        $("#formToSubmit").submit();
    }
</script>

不批准按钮单击工作正常，因为表单提交的默认方法是“GET”。可能不赞成按钮正在引发获取请求。

【讨论】：