jQuery submit() will not work for me undefined property?

Question

This is what I got:

<form method="post" id="myform" class="myform">
    <input type="submit" onclick="return claim();" name="submit" class="onsubmit" value="" />
</form>

function claim() {
    var c = confirm('You sure?');

    if (!c) {
        return false;
    }

    var password = prompt("Please mention pw","");
    if (password != null && password != "") {
        $.post(
            "/claim/", 
            { partner_pwd: password },
            function(data) {
                if (data == '1') {
                    $('form').submit(function() {
                        alert('Handler for .submit() called.');
                    });
                }
            });
        }

        return false;
    }

This works well, but my problem is that it won't submit the form. I tried both $('form').submit() and $('#myform').submit() inside the data == '1' statement. I tried alert(1) inside this if statement, and it displayed fine, I only need to make it submit the form, why wont this work?

Update:

Console says:

Uncaught TypeError: Property 'submit' of object #<HTMLFormElement> is not a function jquery.min.js:3 f.event.trigger

What if you change your button name to something else, like `name="notsubmit"`? — zerkms, May 26 '12 at 10:23
http://blog.sourcecoder.net/2009/10/jquery-submit-on-form-element-does-not-work/ might help! — Tats_innit, May 26 '12 at 10:28
@Tats_innit The link which helped is not available now. Can you please write here the solution? — itsazzad, Jun 17 '14 at 19:04

Tabrez Ahmed · Accepted Answer · 2012-05-26T11:49:50.273

4

You made the following mistakes:

jQuery selector 'form' is too general and returns an array. So change it to '#myform'.
Also your javascript never allows your form to be submitted. The culprit is the last line : return false;. Even after successfully validating the form, this line blocked it. It should have been return true;. This mistake was pointed out by @11684, but no one understood him and was downvoted by some.

Anyways, here's the debugged code.

 function claim()
{
    var c = confirm('You sure?');

    if (!c) {
        return false;
    }

    var password=prompt("Please mention pw","");
    if (password!=null && password!="")
      {
            $.post("/claim/", { partner_pwd: password },
               function(data) {
                    if(data == '1')
                    {
                        $('#myform').bind('submit',function() {
                          alert('Handler for .submit() called.');
                        });
                    }
               });
      }

    return true;

}

edited May 26 '12 at 11:49

answered May 26 '12 at 10:35

Tabrez Ahmed

2,830
6
31
48

ncaught TypeError: Property 'submit' of object # is not a function jquery.min.js:3 f.event.trigger – Karem May 26 '12 at 10:47
still not working. Now it submits even when the data is 0 or when you cancel out from prompt().... – Karem May 27 '12 at 00:49
Update: this worked after tats_innit solution in the comment. I had a submit button named submit which did the submit() did not work. – Karem May 27 '12 at 09:11
@Karem The link which helped you is not available now. Can you please write here the solution? – itsazzad Jun 17 '14 at 19:03

score 3 · Answer 2 · answered May 26 '12 at 10:24

3

To raise an event, you call the relevent function without a parameter like this:

$('form').submit();

Your current code is simply adding a submit handler function to be executed when the form is submit, it is not actually submitting the form.

answered May 26 '12 at 10:24

Rory McCrossan

331,213
40
305
339

Wasnt me, but this does not work. Tried and console gives me ncaught TypeError: Property 'submit' of object # is not a function jquery.min.js:3 f.event.trigger – Karem May 26 '12 at 10:54
@RoryMcCrossan, I too didn't downvote. But want to tell you that when "onclick" on a submit button is called, the submit process is already scheduled to begin and there's no need to trigger it again. – Tabrez Ahmed May 26 '12 at 11:57
@ahmed that's true, exvept the function ALWAYS returns false. The Ajax success needs to call the submit() manually. – Rory McCrossan May 26 '12 at 13:00

score 3 · Answer 3 · answered May 26 '12 at 10:25

3

Try:

$('#myform')[0].submit();

answered May 26 '12 at 10:25

Sarfraz

377,238
77
533
578

jQuery also has `.submit()` method. – xdazz May 26 '12 at 10:26
1

@xdazz: Yep but it is better to use vanilla stuff where possible. – Sarfraz May 26 '12 at 10:27
@Karem: Can you inspect through console what error are you getting what exactly is happenning ? – Sarfraz May 26 '12 at 10:36
In console i get error: ncaught TypeError: Property 'submit' of object # is not a function jquery.min.js:3 f.event.trigger – Karem May 26 '12 at 10:43

score 0 · Answer 4 · answered May 26 '12 at 10:47

0

As Rory said, your code will only add an event handler. You need to do

$(form).submit()

with no parameters. If you want to attach a handler, and then trigger the event later, you can use

$(form).trigger('submit')

answered May 26 '12 at 10:47

user888734

3,797
5
36
67

score 0 · Answer 5 · edited May 23 '17 at 12:12

I had a similar problem except I was trying to submit the form from Javascript, not attach an onsubmit event handler. The issue turned out to be that the submit button on the form I was working with had its name="submit"...I suspect that was part of what caused the original poster's problem as well. When the form has a button named "submit", it creates a "submit" property on the form object, overwriting the usual value of the "submit" property, which is a function that submits the form.

See javascript submit() is not a function? for more details

jQuery submit() will not work for me undefined property?

5 Answers5