jQuery/JavaScript: How can i do this two-smart-page sign up model

tags:

jquery

views:

answers:

jQuery/JavaScript: How can i do this two-smart-page sign up model

Please check this site, while I am explaining:

http://www.dkbn.dk/

Now this is the part of the site that i want to make something alike:

This is a signup form. Now they have spliced the form up in a cool way, I mean if you try to fill something in the fields and press "Fortsæt" (Next in English) then without updating the page, the signup form changes to new fields "Password, birthday, Country" and then the button changes to "Log in".

How have they done that? I suspect they have used jQuery? How should I do this, if I want to do something like this? Please show me with examples as am still learner in jQuery. Thank you.

+1 A:

They use jQuery to submit the first form with Ajax, then they publish (if succeeded) the new form elements into the front end, this is done by putting the output in the div where now the loginform is stored. The output comes from the back end script (called by Ajax). Meanwhile the full name and email are stored in sessions. When an user submit the second form the session + new data is collected by a new back end script, which probably pushes everything into a database and give an output succeeded.

Tim 2010-07-31 20:29:49

Thanks for your answer. I dont get "they use jquery to submit the first form with ajax"?, arent they just putting fullname+email into session variables then toggling the new form elements on, or? .. and with "then they publish" do you mean like the new form elements gets toggled on or? thanks, could be great if you could provide me little example

Karem 2010-07-31 20:37:56

@Karem - They need to get the data to the server in order to put it into a session. This is done via an Ajax call.

Gert G 2010-07-31 20:39:35

"This is done by putting the output in the div where now the loginform is stored", by toggling that off and the new form elements on?

Karem 2010-07-31 20:41:49

@Gert G Can you show me how to do an ajax call?

Karem 2010-07-31 20:42:54

@Karem - Check out the examples on jQuery's website: http://api.jquery.com/jQuery.ajax/#entry-examples

Gert G 2010-07-31 20:54:02

@Karem - You can also choose to replace the content in the existing div.

Gert G 2010-07-31 20:56:08

@Gert G, OK so im on my way, thanks for the link, but what do @Tim mean with "They publish the new form elements into the front end, output comes from the back end script(called by ajax)" I dont understand this, into the front end? and output where it comes from the back end script? And what does back end script mean? That is the last thing remain comfusing me..Example or better explanation would be more than great.

Karem 2010-07-31 21:06:12

He probably meant that the data comes from the server (the *back end*). The *front end* is the browser. So, that's where visual action (e.g. replacement of form elements etc) and connectivity with the back end (the Ajax calls) takes place.

Gert G 2010-07-31 21:16:04

ansaurus

tags:

views:

answers:

jQuery/JavaScript: How can i do this two-smart-page sign up model

related questions