Page 1 of 1

show form on onclick

Posted: Wed Apr 07, 2010 11:03 am
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..

Re: show form on onclick

Posted: Wed Apr 07, 2010 11:52 am
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

Re: show form on onclick

Posted: Wed Apr 07, 2010 12:04 pm
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..

Re: show form on onclick

Posted: Thu Apr 08, 2010 2:51 pm
by kaszu
You should learn CSS, HTML and JS. Useful Resources post should be a good start.