How to submit form using JS

Question

Possible Duplicate:
submit is not a function in javascript

I am trying to submit form using JS, but no luck. Here is the code. JSFIDDLE

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
    function validate () {
        alert('start');        
        $('#myform').submit();
        alert('end');        
    }
    </script>
</head>
<body>
    <form id="myform" name="myform" method="post" action="">
        <input type="button" value="submit" id="submit" onclick="validate();" >
    </form>
</body>
</html>

The question is "Why its not working?".

What does **not working** mean? Is there an error on the page? — Andrew Whitaker, Oct 13 '12 at 19:37

Musa · Accepted Answer · 2012-11-02T20:41:47.867

10

You have an form element with the id submit which conflicts with the form method submit, change the submit button id to something else.

You can access form elements as properties of the form object, so if you have a form say myForm and an input in the form with id or name submit then myForm.submit will be the input element with id submit and not the original submit method.

See http://jsfiddle.net/4kg8c/1/

edited Nov 02 '12 at 20:41

answered Oct 13 '12 at 19:40

Musa

96,336
17
118
137

Is that mean, we shouldn't name an ID to any JS function, seems strange. one is ID and other is function. – Riz Oct 13 '12 at 19:46
1

@Dev you can access form elements as properties of the form object, so if you have a form say `myForm` and an input in the form with id or name `submit` then `myForm.submit` will be the input element with id submit and not the original submit method. – Musa Oct 13 '12 at 19:50

score 3 · Answer 2 · answered Oct 13 '12 at 19:42

3

The error in the console is

Uncaught TypeError: Property 'submit' of object #<HTMLFormElement> is not a function

The problem is you hijacked the sumit() function by naming an element submit. Change the button's id to btnSubmit.

answered Oct 13 '12 at 19:42

epascarello

204,599
20
195
236

great!!! that's the point but the ID is submit, how can that hijack submit function of JS ? – Riz Oct 13 '12 at 19:44
1

Do a console.log(document.forms[0].submit); You will see that the element is referenced and not submit. The id will take place of the name. Hence why you get the error. Never name element's submit with an id or name. – epascarello Oct 13 '12 at 19:48

score 1 · Answer 3 · answered Oct 13 '12 at 19:41

I have modify your code with solution use that.

submit button's name is missing. and don't use name as "submit" of submit. it conflicts with JS so.

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
    function validate () {
        document.myform.submit();   
    }
    </script>
</head>
<body>
    <form id="myform" name="myform" method="post" action="">
        <input type="button" name="save" value="submit" id="submit" onclick="validate();" >
    </form>
</body>
</html>

that's not working. There is nothing wrong with jQuery code. — Riz, Oct 13 '12 at 19:42

score 0 · Answer 4 · answered Oct 13 '12 at 19:39

0

If this is the exact code you have written, then I think you have ot included jQuery library in the page.

You need to include jQuery file before you can use the $("#myform") notation.

Also specify some action URL where you want to submit the page to ?

answered Oct 13 '12 at 19:39

Amogh Talpallikar

12,084
13
79
135

score -1 · Answer 5 · answered Oct 13 '12 at 19:38

-1

You use jQuery code (the $ function) but you do not include the jQuery source.

answered Oct 13 '12 at 19:38

fw42

32
1

I had posted link to jsfiddle, please have a look. – Riz Oct 13 '12 at 19:39

How to submit form using JS

5 Answers5

Linked

Related