show form on onclick

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
arbitter
Forum Newbie
Posts: 24
Joined: Tue Dec 29, 2009 10:04 am

show form on onclick

Post by arbitter »

Hello,

I'm new to javascript and can't figure out how to do this. What I want is that there when you click on 'login', underneath it a form appears with 2 fields and a submit button.

Now, I can manage the form, but I don't know how to do the javascript part... Can someone get me started please?

I've searched through the w3schools examples but havn't found what I was looking for..
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: show form on onclick

Post by kaszu »

HTML:

Code: Select all

<!-- Link -->
<a href="/login" onclick="return showLoginForm();">Login</a>

<!-- Hidden form (display: none in css) -->
<form id="loginForm">...</form>
JS to show the form:

Code: Select all

function showLoginForm() {
    //Show form
    var form = document.getElementById('loginForm');
    form.style.display = block;

    //Prevent from actually going to /login page
    return false;
}
To position form under the link use CSS
arbitter
Forum Newbie
Posts: 24
Joined: Tue Dec 29, 2009 10:04 am

Re: show form on onclick

Post by arbitter »

Thanks for your reply.
Does the javascript have to be in the <head> ?
Because I put it in the head part and the form just shows, without clicking on login..
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: show form on onclick

Post by kaszu »

You should learn CSS, HTML and JS. Useful Resources post should be a good start.
Post Reply