4

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.

Improve this question
1
  • 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. Commented Jun 6, 2010 at 20:08

7 Answers 7

Reset to default
4

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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

4

You need to specify one form.

$("#loginForm").submit();
Improve this answer

4 Comments

Oh sorry, I forgot to say, I did that and it didn't work either.
@Razor then there should be an error message in Firefox's error console. Are there any?
@Razor strange. are you 100% sure that the form's submit is not overridden at some point, returning false?
Hmm it doesn't appear to be. This is the link of the site: operation.mylifeisberkeley.com
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"); });
});
Improve this answer

6 Comments

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()
@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.
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.
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.
@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?
|
0

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

Improve this answer

2 Comments

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

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

Improve this answer

Comments

0

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.

Improve this answer

Comments

0

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/

Improve this answer

2 Comments

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();
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.