Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

A Form that is spread over a few pages... 1

Status
Not open for further replies.

SteveAudus

Technical User
Oct 4, 2001
409
GB
I am codeing a site (html), that requires a questionaire that needs to be spread over a number of pages.

Without moving into php or asp. Does anyone know of a code out there, maybe javscript using cookies, that allows a form to be split like this, and then sends all the info to an email address like using Formmail?

Any suggestions?

Thanks.
Steve


 
The easiest way to do what you want is to use cookies that are set when the page is submitted to the next page. The websites that do surveys use ASP or PHP to create the cookies, from what I've seen, but you can do that client-side with Javascript, too.

Lee
 
Instead of spreading it over a number of pages you could put the questions into DIVs -one visible at a time:

STEP 1 (visible)
STEP 2 (hidden)
STEP 3 (hidden)
...

then

STEP 1 (hidden)
STEP 2 (visible)
STEP 3 (hidden)
...

ect.

And THEN send the whole thing using formmail. That way you don't need cookies.


Jakob
 
Hi Jakob,

Good suggestion. I work with FrontPage forms myself, and am lacking some HTML knowledge.

I would like to see what that code would look like for a couple of field sets, if it's not too much trouble. I have never worked with divs like that, but I am interested in seeing how it works.

Hope I have been of some help,
Micheal Smith

FrontPage Form Tutorials & Form Script Examples
 
Hi Michael,

Glad you like my idea. Have a look at this example:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<HTML>
<HEAD>
  <TITLE>3 step form</TITLE>
  <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
  <SCRIPT>

    function init() {
      document.getElementById('step1').style.display = "block";  
      document.getElementById('step2').style.display = "none";  
      document.getElementById('step3').style.display = "none";  
    }


    function step2() {
      document.getElementById('step1').style.display = "none";  
      document.getElementById('step2').style.display = "block";  
    }


    function step3() {
      document.getElementById('step2').style.display = "none";  
      document.getElementById('step3').style.display = "block";  
    }

  </SCRIPT>
</HEAD>
<BODY onLoad="init()">
  <H1>3 step form</H1><HR>

  <FORM ACTION="formmail.cgi" METHOD="POST">

    <DIV ID="step1">
      <H2>STEP 1</H2>
      Your name : <INPUT TYPE="text" NAME="name" SIZE="30"><BR><BR>
      <BUTTON onClick="step2()">Next</BUTTON>
    </DIV>

    <DIV ID="step2">
      <H2>STEP 2</H2>
      Your homepage : <INPUT TYPE="text" NAME="homepage" SIZE="30"><BR><BR>
      <BUTTON onClick="step3()">Next</BUTTON>
    </DIV>

    <DIV ID="step3">
      <H2>STEP 3</H2>
      Your e-mail : <INPUT TYPE="text" NAME="email" SIZE="30"><BR><BR>
      <INPUT TYPE="submit" VALUE="Send information">
    </DIV>

  </FORM>

</BODY>
</HTML>

Hope you find it useful -get back to me if you have any questions!

Regards


Jakob
 
Hey Jakob,

Just got home from work. Excellent. I like this. I will have to test it out when I get a day off.

This looks like a Javascript code, but it isn't identified as such. Plus, it acts like going from page to page with ASP.

Thank you for posting the code. I am mostly code dumb. I would like to learn, but procrastination is the fault we put off correcting until tomorrow.

Would this type of action go from page to page and then submit the results, or because it is using <div> tags, they would need to be on the same page.

I get a lot of FrontPage questions from people that want their forms to span multiple pages but like me, don't know jack about ASP or JSP etc.

Ok, one more question. Could this method be used to say have the first div be personal info e.g. name, address, phone and then the next div might be education (similar to like a job app).

Maybe I am catching on. If I wanted separate areas, they would be added to step1 div and then step2 div. Got it. This made my day. Thanks again.

I apologize for getting too wordy, it is a curse. Still curious about spanning pages with this method, although I guess honestly that might sound stupid since this system hides the next fields.


Hope I have been of some help,
Micheal Smith

FrontPage Form Tutorials & Form Script Examples
 
What this does is allow you to display multiple pages of information progressively on the same page, like going to consecutive pages without ever leaving the one page. All information is stored on the one page, so when the submit button is clicked, the page that processes the data has it all at once.

You can put whatever information you wish in the consecutive <div>s, just like you would on individual pages.

By default, <script> tags are Javascript unless otherwise indicated, though it's not the best coding practice to leave that information out.

Lee
 
Michael,

Yes, the script language is javascript. Rushing through this I forgot the type="text/javascript" attribute (thanks Lee).

As Lee says you can actually put whatever you like in those DIVs. Have a look at this sample job application I wrote just for you -with an added detail on step 3.

Here's the link:


Feel free to copy as you like.

Regards


Jakob
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top