JQuery to Submit a Form - Spot the Error

Question

I've checked here and here but can't get my form to submit. (noob to Jquery...)

<html>
<head>
    <title>Book Notes Application - Subjects</title>
    <script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
    <script>
        $(document).ready(function(){
            $('#subject_id').change(function(){
                var subject_id = $(this).val();
                //alert(subject_id)
                //document.forms["choose_subject"].submit();
                $('#choose_subject').submit();
                //$('form#choose_subject').submit();
                //$('form#choose_subject')[0].submit();
                //alert(subject_id);
                //document.getElementById("choose_subject").submit();
            })
        })
    </script>
</head>
<body>
    <!-- CHOOSE SUBJECT -->
    <FORM action="/books" id="choose_subject" name="choose_subject" method="POST">
        Choose a Subject:
        <select name="subject_id" id="subject_id">
                <option value="1">a</option>
                <option value="2">a2</option>
        </select><input type="submit" name="submit" value="Choose Subject"/>
        <BR />
    </FORM>
    <!-- CREATE SUBJECT -->
    <FORM action="/subjects" id="create_subject" method="POST">

        <BR /><BR />
        Create a new Subject
        <input type="text" name="subject_name" />
        <input type="submit" name="submit" value="Create Subject" />
    </FORM>
<body>
</html>

I've tried each of these methods:

1) document.forms["choose_subject"].submit();
2) $('#choose_subject').submit();
3) $('#choose_subject')[0].submit();
4) $('form#choose_subject').submit();
5) $('form#choose_subject')[0].submit();
6) document.getElementById("choose_subject").submit();

The first and last result in a "TypeError: document.forms.choose_subject.submit is not a function.

The second and fourth don't have an error but they also doesn't do anything.

The third and fifth error out with a "TypeError: $(...)[0].submit is not a function"

If I remove the second form these results hold true.

Clicking the submit button works as expected.

Can you post the rendered HTML, not whatever that is. Something else is interfering, because as you can see, a basic jsFiddle using your code works: http://jsfiddle.net/j08691/66f7Y/. Although it will still submit even without the jQuery. — j08691, Mar 23 '14 at 21:37
@j08691 Edited with the rendered HTML (it was python's Bottle btw) — Matthew Moisen, Mar 23 '14 at 21:40
Do you have any other JavaScript running on your page? I don't see why you'd need JS to submit the form since the submit button will do it by default. — j08691, Mar 23 '14 at 21:40
@j08691 the effort involved in clicking a submit button is strenuous. — Matthew Moisen, Mar 23 '14 at 21:42
try setting enctype="multipart/form-data" as a form attribute. — Dr.Knowitall, Mar 23 '14 at 21:42
@Mr.Student the enctype tag didnt work :(. The double was a copy and paste error; I've edited it out now. — Matthew Moisen, Mar 23 '14 at 21:46
@Mr.Student From what I understand, the `` includes the Jquery. The alert function that I commented out successfully alerts the subject_id when the select box is changed. — Matthew Moisen, Mar 23 '14 at 21:48
@Mr.Student The select box changing triggers it. If I uncomment the alert it successfully alerts the subject_id when the select box is changed. — Matthew Moisen, Mar 23 '14 at 21:49
Have you opened up a js console to check if the form is not submitting. How do you know it's not working? — Dr.Knowitall, Mar 23 '14 at 21:51
@Mr.Student Yes I have a console up. Its not working because I'm not being directed to the next page, which occurs when I click on the submit button. — Matthew Moisen, Mar 23 '14 at 21:52

score 2 · Accepted Answer · answered Mar 23 '14 at 21:52

2

Change your the name of your input element:

<input type="submit" name="submit" value="Choose Subject"/>

to something other than "submit". As the .submit() docs state:

Forms and their child elements should not use input names or ids that conflict with properties of a form, such as submit, length, or method. Name conflicts can cause confusing failures.

jsFiddle example

answered Mar 23 '14 at 21:52

j08691

204,283
31
260
272

2

**+1** Excellent catch! – Drew Chapin Mar 23 '14 at 21:58
@druciferre - Thanks. I'd file this under the "confusing failures" that the docs refer to ;) – j08691 Mar 23 '14 at 21:59

JQuery to Submit a Form - Spot the Error

1 Answers1