Dynamic Box Insert

[kjs50]

Hello,

I have seen sites that use dhtml tabs to switch between different content sections without needing the page to reload.

I would like to do something similar but different on my checkout page. I currently display the shipping information, but I would like to display a link that existing customers can click. If they click this, I would like to then display on the page a form where they enter their email and last name. Ideally, when they click this, the rest of the shipping form would get pushed down when the form appears. I would like this to happen without a page reload.

I'm not exactly sure where I should start with this.

Thanks!

[orion_rus]

no problem at all. But u need to understand what u want to do with this email. If u want immidiately send it to a server, U need to open a new window for this. But if u want to store it until all form will be filled and u send it to a server with another data, U can make it in a this window.

[kjs50]

Hello,

I actually just need to figure out how to display that form section in the existing page when the user clicks on the link. I would like to use dhtml (I believe) to have the 2 fields hidden until the user clicks the link (display the fields without reloading the page). There are other fields on the page, but those two boxes would be only for users that are existing customers and click the link.

What actually happens to the form is already taken care of.

Thanks.

[tedster]

You're correct that this needs to be a dhtml solution. There really is no technology formally called dhtml - it is a combination of javascript and css. We have dedicated forums for each of these if you need more support as you get rolling.

Essentially you need what is called "show/hide divs". A Google search just for webmasterworld.com [google.com] shows over 270 results, so a bit of research here should give you plenty to work with.

It's really straightforward conceptually, although you may have some small details you want to tweak for your exact page.

The idea is that your page loads with a named div that holds the form, but it also has a css rule that loads it in a 'not visible' state. Then there is a javascript link that changes the visibilty - it calls a function onClick to change the css style and make the div visible.

It should be a satisfying and not-too-challenging project for you. And as I said, we have both a CSS Forum [webmasterworld.com] and a Javascript Forum [webmasterworld.com] with some very knowing members willing to help if you hit a sticky spot.

[edited by: tedster at 10:25 pm (utc) on Jan. 5, 2005]

[kjs50]

Great!

That's just the info I needed to point me in the right direction. Appreciate the help.