CODEWITHSUNDEEP
javajavascripthtmlformsjsp
RohanK
RohanK

Reputation: 67

Form is not Submitted with Javascript

I am working on a spring web application. In front end I am using JSP. I have a form (with id formToSubmit) in jsp - 

<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>

This form has two button - one for approve (with apprveBtn.png) and another for disapprove (with disApproveBtn.png). So I write some javascript to submit the form on button click - 

<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>

When I click the disapprove button the form is submitted properly. But when I click on the approve button the form is not submitted properly. Can anyone help me why the form is not submitted properly?

Upvotes: 2

Views: 87

Answers (2)

morha13
morha13

Reputation: 1937

Just removed the :form, I can't see why is it necessary.

Also, Thanks to Razib, except from the :form part which is unnecessary, you forgot to set the method to POST, so you can add it in the javascript part, or in the HTML. I did in both as you can see. You can use only one of them.

    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/

Upvotes: 2

Razib
Razib

Reputation: 11163

I think you are missing the 'method' attribute in you javascript. You have to add attr("method", "POST") in your javascript. If I rewrite your code with my changes then it would be - 

<script type="text/javascript">

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

The disapprove button click working properly because the default method on form submit is 'GET'. Probably the disapprove button is throwing a get request.

Upvotes: 1

Related Questions