Using Javascript to submit forms

Question

EDIT: For some reason if I change the input into an , the submit code works fine. Ok, this works, I'll just style the a tag to look like an input tag in css.

I am using a jQuery function to submit a form when a certain button is pressed, however this seems to have no effect on 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 occurs.

PS. This function may seem meaningless since I can just use a input type="submit" but I originally intended this to have some more functionality, I stripped the function to its bare bones for testing purposes.

• Pekka: Nice that this got solved (although I don't really understand why :) By the way, your background image is pretty heavy (weighs in at 1.3 MB). May be too large for many connections.

Answer 1

Try to use another name for input with name="submit". Without this it works fine for me.

Answer 2

You need to specify one form.

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

• Razor Storm: Oh sorry, I forgot to say, I did that and it didn't work either.
• Pekka: @Razor then there should be an error message in Firefox's error console. Are there any?
• Pekka: @Razor strange. are you 100% sure that the form's submit is not overridden at some point, returning false?
• Razor Storm: Hmm it doesn't appear to be. This is the link of the site: operation.mylifeisberkeley.com

Answer 3

EDIT: Additional information added to question. (削除) You appear to be calling the wrong function. The submit button that is not display:none calls loginProceed() not submitlogin(). (削除ここまで)

(削除) Also, if the functions are defined within jQuery's ready() function, they will be out of scope unless you define them as global. (削除ここまで)

(削除) Live example: http://jsfiddle.net/eSeuH/ (削除ここまで)

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

If the code you noted in the comment runs before the DOM is loaded, it will not work. You need to ensure that it does not run until the DOM has loaded (or at least the element it references has loaded).

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

• Razor Storm: loginProceed() simply makes all the invisible form elements visible, and makes the previously visible ones invisible. So after that is called, the submit button that was once display:none will no longer be. That's the button that matters, and it calls submitlogin()
• user113716: @Razor - Ok, based on the information given that wasn't clear. How about the scope of the functions? Where are they defined? See live example I posted in my answer.
• Razor Storm: Ok they are in the global scope. I tried yours in the live example. I also tried this: $("#loginForm").submit(function() { alert("clicked"); }); Yet the alert doesn't even pop up.
• Razor Storm: Also, if I put an alert inside the body of the submitlogin() function, it does show up, so I know the correct function is being called.
• user113716: @Razor - The code you added in your comment $("#loginForm").submit(function() { ... won't work unless it is run after the DOM has fully loaded. Is that the case?

Answer 4

Additionally, your action attribute in your form tag is empty. What do you expect to happen when the form is submitted?

• Pekka: When action is empty, the form will target the current page.
• Razor Storm: Because when action attribute is empty, the form will direct to the current page. I know nothing occurs because the page does not refresh.

Answer 5

Try look in to Firefox debug console. Maybe you have errors in javascripts??? Because even if action is empty, all works.

Answer 6

For some reason if I change the input into an , the submit code works fine. Ok, this works, I'll just style the a tag to look like an input tag in css.

Answer 7

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

You probably want to invoke form's submit method:

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

Remember, jquery selector always returns array.

edit
'submit' will actually bind handler to submit event, not submit form:
http://api.jquery.com/submit/

• Razor Storm: I tried that and firefox error console says "$("#loginForm")[0].submit() is not a function". It didn't say anything when I did $("#loginForm").submit()
• Nikita Rybak: I fiddled a bit with it: if you change 'name="submit"' to something else (like 'name="submit2"'), then '$("#loginForm")[0].submit();' will actually submit form.