CODEWITHSUNDEEP
javascriptjqueryhtmlforms
Danilo Bargen
Danilo Bargen

Reputation: 19482

jQuery doesn't submit a form

I have the following HTML code:

<?xml version="1.0" encoding="utf-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>IT-Services Umfrage - Fragen</title>

    <link rel="stylesheet" type="text/css" href="/IT/umfrage/../../style.css" />
    <link rel="stylesheet" type="text/css" href="/IT/umfrage/css/umfrage.css" />

    <script type="text/javascript" src="/IT/umfrage/../../inc/jquery-1.4.2.js"></script>
    <script type="text/javascript" src="/IT/umfrage/js/umfrage.js"></script>
</head>

<body id="page-show">
    <div class="ueberschriftsbalken"><span>IT-Services Umfrage - Fragen</span></div>
    <br />
    <div id="content">

        <form action="/IT/umfrage/Umfrage/save" method="post" id="umfrageForm">
            <div class="frage radio">
                <p>1. Wie professionell empfinden Sie das Auftreten der IT-Service Anlaufstelle?</p>
                <label for="frage1_1"><input type="radio" name="frage1" id="frage1_1" value="1" /> Lausig</label><br />
                <label for="frage1_2"><input type="radio" name="frage1" id="frage1_2" value="2" /> Schwach</label><br />
                <label for="frage1_3"><input type="radio" name="frage1" id="frage1_3" value="3" /> Durchschnittlich</label><br />
                <label for="frage1_4"><input type="radio" name="frage1" id="frage1_4" value="4" /> Gut</label><br />
                <label for="frage1_5"><input type="radio" name="frage1" id="frage1_5" value="5" /> Hervorragend</label>
            </div>
            <input type="submit" value="Antworten absenden" name="submit" id="submitbutton" />
        </form>
    </div>
</body>
</html>

When clicking on the submitbutton or when pushing the enter key, the form gets submitted. But when i try $('#umfrageForm').submit(), $('form').submit() or anything similar, nothing happens. In Firebug, the function only returns the DOM path to the form element.

What could be the problem that prevents the form from being submitted?

Upvotes: 16

Views: 26585

Answers (4)

Alex
Alex

Reputation: 1

I had once similar problem. Your code should work if you include Java-script file as you show. However, I suspect your code is a part of a bigger html-document. The problem arises when you download the body part of your html-document into another html-document without including Java-script-functions in sub-document (since they are included in the parent-document). Then it will not work. You have to include Java-script file also in sub-document.

Upvotes: -1

Quentin
Quentin

Reputation: 944480

You have a field named submit, this clobbers the submit method of the form (with a reference to the DOM node for the field) that jQuery depends on in its own submit method.

Rename it.

Upvotes: 68

Harinath
Harinath

Reputation: 61

yes when you have input elements with the name "submit" you will find the $('#formID').submit() to not to behave as it is expected. Just replace the input field name (may be the submit button) to something more relevant.

I know this post is old one, just had the same problem for me and thought I should post my findings.

Upvotes: 0

Harmen
Harmen

Reputation: 22456

I think you fire the submit event before the DOM is actually loaded, because if I try it, this code works:

$(document).ready(function(){

    // Submit handler, to prove everything works fine
    $('#umfrageForm').submit(function(){
        alert('hi');
        return false;
    });

    // Fire the submit event
    $('#umfrageForm').submit(); // alerts 'hi'
});

See: jsFiddle

Upvotes: 5

Related Questions