my jquery fiddle isn't working

Question

My fiddle only shows part of what I'm trying to do, but since I can't even get the first part to work, I didn't try to add the second part.

First part

There's 2 forms. the second form is invisible because its class is set to "display: none;"

What I want to do is, when you hit "send" on the first form, it fades out, and then the class changes on form2 so that it becomes visible.

My fiddle shows my feeble attempt at this http://jsfiddle.net/mjmitche/KvwGw/

Note, I'm a newbie so please provide as much explanation as possible. (Note, I didn't create proper forms in the fiddle because didn't know where to post them etc)

Second (unattempted) Part

Once the send is clicked on the second form, I want a call back function that fades the second form out as well.

Please help if you can.

Much appreciated!

Answer 1

Here you go. Here is an updated and working one. Hopefully you can tell the difference, let me know if there is anything you don't understand

http://jsfiddle.net/KvwGw/2/

Second part

$('#form2').submit(function() {
    // add form submit stuff in there

    $(this).fadeOut(); //fades out form
    return false; //prevents form from submitting to the form action

});

Answer 2

Your syntax is just a little off, this:

.css(display:block);

Should be:

.css({display:"block"});

or:

.css("display", "block");

or simply:

.show();

You can test it out here.

Also, note than <blah> being an invalid element means your .hide() wouldn't work as-is, I made those elements actual <div>s.

---

Edit: For the second part you can either attach a similar handler one-off, or make your forms generic for n number with a common class. Say instead they all had class="form", then you could just do:

$(".form").submit(function() {
    $(this).hide(1000,function() {
        $(this).next(".form").show();
    });
    return false; //prevent actually submitting for this demo
});

...tweaking the .next() to be some other relative find if necessary in your actual page structure. This approach works for any number of forms in a very simple way, you can test it out here.

Answer 3

Try this: your fiddle updated

You need to wrap css properties in object notation brackets, or as comma-seperated strings like that: .css("display", "block")