Form Mail Multiple Steps - JavaScript - Forums at ProgrammersHeaven.com

JavaScript

Moderators: None (Apply to moderate this forum)

Number of threads: 2058
Number of posts: 5158

With full replies

Topics only

JavaScript

Forum Info

This Forum Only

Single Post View Linear View Threaded View f

Printer Friendly

RSS Feed

Form Mail Multiple Steps Posted by limecity on 17 May 2006 at 8:22 PM

I am always puzzled about this.

How do you create a forms that has multiple steps or page?
How does this work?

What i wanted was create something like this:

[Step 1- Page 1 ]
Register User Info

[Step 2- Page 2]
Select products ----- SUBMIT

Please guide me. thanks.

Share By Email

Re: Form Mail Multiple Steps Posted by zibadian on 17 May 2006 at 11:59 PM

: I am always puzzled about this.
:
: How do you create a forms that has multiple steps or page?
: How does this work?
:
: What i wanted was create something like this:
:
: [Step 1- Page 1 ]
: Register User Info
:
: [Step 2- Page 2]
: Select products ----- SUBMIT
:
: Please guide me. thanks.
:
:
:
This kind of things cannot be done using only html and javascript, since neither can store on the server.
The general outline is like this: The HTML page contains most often forms to post the information to the server. The server parses this information and based on the info supplied performs certain checks. In case of your first page, the server should check if the user info is correct. This might be done using a lookup of the info in a server-stored database, but might also include server-to-server communication with bank servers or other registry services.
The second page can be based on edit boxes or check boxes to select products (depending on the needs of the service). Posting this info to the server will add it to a special database, which stores all the sale information. This information can then be accessed by employees to process the purchase.
Javascript can be used to pre-validate the entries, but by itself it cannot completely process all the data.
Since this is such a broad question my answer is only one of the possible methods used and is maybe a bit vague, but I hope this makes things a bit clearer.

Share By Email

Re: Form Mail Multiple Steps Posted by mac_doggie on 3 Jul 2006 at 1:38 PM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" />
<html lang="nl">
   <head>
      <title>website - page</title>
      <script type="text/JavaScript"    Language="JavaScript">
         function show(step) {
            switch(step) {
               case 2 :
                  document.getElementById('step1').style.display = 'none';
                  document.getElementById('step2').style.display = 'block';
                  document.getElementById('step3').style.display = 'none';
                  break;
               case 3 :
                  document.getElementById('step1').style.display = 'none';
                  document.getElementById('step2').style.display = 'none';
                  document.getElementById('step3').style.display = 'block';
                  break;
             
            }
         }
      </script>
   </head>
   <body>
      <form action="mailto:myemail@myserver.com" method="post" name="theForm">
        <div id="step1">
           firstname <input type="text" name="firstname" value="" />
           lastname <input type="text" name="lastname" value="" />
           <input type="button" value="next &raquo;"  onclick="show(2)"/>
        </div>
      
        <div id="step2" style="display:none;">
           some other data1 <input type="text" name="other1" value="" />
           other data2 <input type="text" name="other2" value="" />
           <input type="button" value="next &raquo;" onclick="show(3)" />
        </div>
      
        <div id="step3" style="display:none;">
           some other data3 <input type="text" name="other1" value="" />
           other data4 <input type="text" name="other2" value="" />
           <input type="button" value="next &raquo;" onclick="document.forms['theForm'].submit();" />
        </div>
      </form>
   </body>
</html>

-mac-
mailto:mac_doggie@hotmail.com
the Netherlands...

Share By Email

JavaScript

Recent Jobs