CODEWITHSUNDEEP
jqueryhtmlformsjsp
Newbie
Newbie

Reputation: 1714

jquery form.submit() not working

I have a simple jquery that will validate the form and submit the form:

function submitForm()
{
    var name = $('#name').val();
    if (name === "")
    {
        alert("Please fill in name.");
        $("#name").focus();
    } 
    else
    {
        alert("Submit form");
        //document.getElementById("edit_pet_form").submit();
        $("#edit_pet_form").submit();
    }
}

Below is my form:

<form action="EditPet" method="POST" name="edit_pet_form" id="edit_pet_form">
<table style="text-align: left;">
    <tr>
        <td align="left">
            Name:
        </td> 
        <td align="left">
            <input type="text" id="name" name="name" size="20" value="${pet.name}" autofocus="true" />
        </td>
    </tr>
    <tr>
        <td align="left">
            Gender:
        </td> 
        <td align="left">
            <input type="radio" name="gender" id="gender" value="M" ${pet.gender == 'M' ? "checked":""} />Male 
            <input type="radio" name="gender" id="gender" value="F" ${pet.gender == 'F' ? "checked":""} />Female
        </td>
    </tr>
    <tr>
        <td>
            Type:  
        </td> 
        <td>
            <select name="type" id="type">
                <option value="D" ${pet.type == 'D' ? "selected":""}>Dog</option>
                <option value="C" ${pet.type == 'C' ? "selected":""}>Cat</option>
                <option value="H" ${pet.type == 'H' ? "selected":""}>Hamster</option>
                <option value="B" ${pet.type == 'B' ? "selected":""}>Bird</option>
                <option value="R" ${pet.type == 'R' ? "selected":""}>Reptile</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>
            Owner:   
        </td> 
        <td>
            <select name="owner" id="owner">
                <c:forEach items="${customerList}" var="customerList">
                    <option value="${customerList.username}" ${pet.owner.username == customerList.username ? "selected":""}>${customerList.name}</option>
                </c:forEach>
            </select>
        </td>
    </tr>
    <tr>
        <td colspan="2" align="center">
            <input type="button" id="submit" value="Submit" onclick="submitForm()" /> <input type="hidden" name="petId" value="${pet.id}">
        </td>
    </tr>
</table>
</form>

I cant find anything wrong with my html form as well as the jquery. The other part of the jquery all works well, alert dialog will show, only the $("#edit_pet_form").submit(); statement not working. any idea?

Upvotes: 1

Views: 11809

Answers (3)

Evil Dr. PorkChop
Evil Dr. PorkChop

Reputation: 379

your input element with submit which invokes onclick="submitForm()" what are you trying to do? Are you trying to submit the form to a server as a post request or just have it be validated by the function on the button click?

if you're trying to send the data somewhere you have to tell it where to send to :), unless you have a post route on your server that can accept that location?

Not sure what you're trying to do, the jquery function is doing what it needs to though :)

what is that you want that function to do? 

$("#edit_pet_form").submit();

Upvotes: 0

JJJ
JJJ

Reputation: 3332

Since you're using jQuery, you need to call your function when the document is ready:

$(document).ready (function () {
  //Your code
  });

Upvotes: 3

Cruz
Cruz

Reputation: 681

Rename you button so it doesn't have "submit" as id.

<input type="button" id="somethinghThatIsNotSubmit" value="Submit" onclick="submitForm()" />

Upvotes: 8

Related Questions