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.

Answer 1

You need to specify one form.

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

Answer 2

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

Answer 3

How can you be sure that nothing occurs when action attribute is empty?

Answer 4

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/

Answer 5

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"); });
});

Answer 6

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

Answer 7

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 8

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