Using Javascript to submit forms

Question

EDIT: For some reason, if I change the input to a, the send code works fine. Ok, this works, I just create a tag to look like an input tag in css.

I use the jQuery function to submit the form when a certain button is clicked, however this does not seem to affect the form.

My code is as follows: HTML:

<form id="loginForm" action="" method="POST"> <input class="loginInput" type="hidden" name="action" value="login"> <input id="step1a" class="loginInput" type="text" name="username"> <input id="step2a" class="loginInput" type="password" name="password" style="display:none;"> <input id="step1b" class="loginSubmit" onclick="loginProceed();" type="button" name="submit" value="Proceed" title="Proceed" /> <input id="step2b" class="loginSubmit" onclick="submitlogin();" type="button" value="Validate" title="Validate" style="display:none;" /> </form> 

JavaScript:

 function submitlogin() { $("#loginForm").submit(); } function loginProceed() { $("#step1a").fadeOut("slow",function(){ $("#step2a").fadeIn("slow", function(){ $("#step2a").focus(); }); }); $("#step1b").fadeOut("slow",function(){ $("#step2b").fadeIn("slow"); }); $("#step1c").fadeOut("slow",function(){ $("#step2c").fadeIn("slow"); }); } 

However, when I press the button, absolutely nothing happens.

PS. This function may seem pointless, as I can just use input type = "submit", but initially I assumed that it would have more functionality, I disabled the function to its bare bones for testing purposes.

Answer 1

Try using a different name for input with name="submit" . Without this, it works great for me.

Answer 2

You need to specify one form.

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

Answer 3

EDIT: Added more info. It seems you are calling the wrong function. A submit button that does not display:none calls loginProceed() not submitlogin() .

In addition, if functions are defined in the jQuery ready() function, they will not be available unless you define them as global.

Real-time example: http://jsfiddle.net/eSeuH/

Updated example: http://jsfiddle.net/eSeuH/2/

If the code you specified in the comment is executed before the DOM loads, it will not work. You need to make sure that it does not start before loading the DOM (or at least the element loaded by it).

 $(document).ready(function() { $("#loginForm").submit(function() { alert("clicked"); }); }); 

Answer 4

In addition, your action attribute in the form tag is empty. What do you expect when the form is submitted?

Answer 5

There is no jquery 'submit' method (not for ajax, at least): http://api.jquery.com/category/ajax/

You probably want to call the form submission method:

 $("#loginForm")[0].submit(); 

Remember that the jquery selector always returns an array.

change
'submit' will actually bind a handler to submit the event, rather than submit the form:
http://api.jquery.com/submit/

Answer 6

Try a look at the Firefox debugging console. Perhaps you have errors in javascripts ??? Because even if the action is empty, everything works.

Answer 7

For some reason, if I change the input to a, the send code works fine. Ok, this works, I just create a tag to look like an input tag in css.