Solved

long form

Posted on 1998-11-17
21
206 Views
Last Modified: 2010-04-09
I have a full 2 page printed form that I need to put on the web.  The problem is that it will end up being 6 to 9 pages long if you scroll down.  So what I am looking to do is keep it as tight as possable.  Some of the items all users might not use and some all will use.  So what might be the easiest way to keep the main form as short as I can then if the user has data for an area they can click on that link to add that data.  Then when they are done with the entire form the user presses submit and off they all go as one complete form.

TIA
Craig  
0
Comment
Question by:csindorf
  • 11
  • 9
21 Comments
 
LVL 4

Expert Comment

by:rafistern
ID: 1839805
The approach will depend somewhat on what browsers you are supporting. If you are supporting a wide range of browsers then have buttons (or track text field contents etc) using javascript to open windows with the extra bits of form in them. If you are only supporting IE/NS4+ then you can use DHTML to popup or add in the extra bits of form when a button is clicked or fields are fillled in or radio buttons selected.

Alternatively you could have a form where you preselect the parts of the main form that you are going to use (a la wizard) and use either javascript (client side) or cgi/asp (server side) to custom compile the form.

Let me know more and I'll see how I can help.
0
 

Author Comment

by:csindorf
ID: 1839806
The big thing is browser independance !  So I like the javascript and window thing as long as the code is short and sweet.  But then will all the other windows be considered the one main form ?  It needs to be one form when submitted to the cgi script that is in place.  

TIA
Craig
0
 
LVL 4

Expert Comment

by:pluim
ID: 1839807
Another solution is to store the parts of the form that have
already been filled out in hidden fields.
You create, say, 6 different forms (pages), accessible
from the main form. Each one has a submit button.

After submitting a subform, the CGI program returns the
main form again, with the filled-in values stored as hidden
fields.
Finally, there is a submit button on the main form that
the user can click when he/she is finished.

You can use the same CGI program, just use different
values for the submit button to recognize which subform
the user is on.

Completely browser independant, no javascript, but
slightly more difficult on the server side.

pluim.
0
 
LVL 4

Accepted Solution

by:
rafistern earned 100 total points
ID: 1839808
I would go for a two-pronged assault.

If you are worried that non-javascript browsers might visit your page then have a redirection page like this to select between people getting a long form and those getting the enhanced one

<head>
<script language=javascript>
location.replace("the/enhanced/form.html")
</script>
<noscript>
<meta name="refresh" content="0,the/long/form.html">
</head>

Then write a form that will look like this:

<html>
<head>
      <title>Untitled</title>
<script language=javascript>
function show(theText){
      z=open("","zz",width=300,height=200);
      z.document.open();
      z.document.write("<form>"+theText+"<input type=button value='close' onclick='opener.writeFields(window)'></form>");
      z.document.close();
}

function writeFields(win){
      for(i=0;i<win.document.forms[0].elements.length;i++){
            for(j=0;j<document.forms[0].elements.length;j++){
                  if(win.document.forms[0].elements[i].name==document.forms[0].elements[j].name){
                        document.forms[0].elements[j].value=win.document.forms[0].elements[i].value
                  }
            }
      }
      win.close();
}
</script>
</head>

<body>
<form>
The next part of the code is hidden<br>
<input type=button onclick='sf1_show()' value='click'><br>
<script language=javascript>
function sf1_show(){
show(""+
"<input type=text name='field'>"+
"<input type=text name='field1'>"+
"<input type=text name='field2'>"+
"");
}
</script>
How was that?
<input type=text name=field readonly>
<input type=text name=field1 readonly>
<input type=text name=field2 readonly>

</body>
</html>

Note what I have done:
The button opens function sf1_show() which runs the window opening function show() while passing it the contents of the form to be displayed in the window. When you click on the button in the window it copies the contents of the fields in the window to same-name fields in the base form. These could be hidden fields or readonly visible fields as I have done.

The system is modular. To create a "long form" leave out the button, script tags and the quotes around the lines to be put in the window form:

The next part of the code is  not hidden<br>
<input type=text name='field'>
<input type=text name='field1'>
<input type=text name='field2'>
How was that?


Easy?

PS: the question was a bit more than "easy" so if you want to give a few more points for that answer, feel free.

PPS: if you can use ASP/Perl/PHP then I can convert the above code to a script that will serve the appropriate form automatically, without the redirect to two documents.
0
 

Author Comment

by:csindorf
ID: 1839809
It works great.  How could I change from using a button to a text link?  Some places a button fits in right and others a text link would be best.
0
 
LVL 4

Expert Comment

by:rafistern
ID: 1839810
In place of:

<input type=button onclick='sf1_show()' value='click'>

use:

<a href="javascript:sf1_show()">get some more form</a>

0
 

Author Comment

by:csindorf
ID: 1839811
Outstanding, thanks a heap
0
 

Author Comment

by:csindorf
ID: 1839812
rafistern did I forget to click on the grade ???????
0
 
LVL 4

Expert Comment

by:rafistern
ID: 1839813
You did grade me. No problem. Thanks for the points :-)
0
 

Author Comment

by:csindorf
ID: 1839814
Would it be possable to put the code on 2 or 3 other forms then have them send back to the hidden boxes on the main form.  Resend so you get the points and I will add points to it.  I would like to use a bit of all 3 if not I will use the buttons and links.

csindorf
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 4

Expert Comment

by:rafistern
ID: 1839815
With the solution I gave you, you can open a series of windows - just give each one a different name (use a differently named function sf1_show(), sf2_show(), etc).

Is that what you mean?
0
 

Author Comment

by:csindorf
ID: 1839816
I figured out the multiple windows thing but that is not what I am getting at.  I mean to have let's say 3 forms in all form1, form2, and form3.  Form1 will be the main form that will submit to the cgi.  The other 2 will send back info to form1 and its hidden boxes.  But all 3 can have pop ups like we have done.  Is that better ?
0
 
LVL 4

Expert Comment

by:rafistern
ID: 1839817
You mean like popups inside popups? I suppose you could.

Your function sf1_show() would now look like this:

<script language=javascript>
  function sf1_show(){
    show(""+
    "<input type=text name='field'>"+
    "<input type=text name='field1'>"+
    "<input type=text name='field2'>"+
    "and some text<br>"+
    "&lt;script&gt;"+
    "  function sf1_show(){ "+
    "    show(''+ "+
    "    '<input type=text name=\"field\">'+ "+
    "    '<input type=text name=\"field1\">'+ "+
    "    '<input type=text name=\"field2\">'+ "+
    "    '');"+
    "&lt;/script&gt;"+
    "");
}
</script>

and show() would look something like:

function show(theText){
  z=open("","zz",width=300,height=200);
  z.document.open();
  z.document.write("<head>"+
"&lt;script language=javascript&gt;"+
"function show(theText){"+
"za=open('','zza',width=300,height=200); "+
"za.document.open(); "+
"za.document.write('<form>'+theText+'<input type=button "value=\"close\" onclick=\"opener.writeFields(window)\"></form>'); "+
"z.document.close(); "+
"} "+
""+
"function writeFields(win){ "+
"for(i=0;i<win.document.forms[0].elements.length;i++){ "+
"for(j=0;j<document.forms[0].elements.length;j++){ "+
"if(win.document.forms[0].elements[i].name==document.forms[0].elements[j].name){ "+
"document.forms[0].elements[j].value=win.document.forms[0].elements[i].value "+
"} "+
"} "+
"} "+
"win.close(); "+
"} "+
"&lt;/script> "+
"&lt;/head> ");
  z.document.write("<form>"+theText+"<input type=button value='close' onclick='opener.writeFields(window)'></form>");
  z.document.close();
}


or something like that. This is getting very complicated. I am going home very soon, so I'm sorry I can't give you any more time today. Try it out - it should work.
0
 

Author Comment

by:csindorf
ID: 1839818
No not pop ups inside of pop up but a link that would actually call another form on the site.
0
 
LVL 4

Expert Comment

by:rafistern
ID: 1839819
..and then have two windows open passing data from one to the other? I suppose you could but it sounds rather confusing to me.

Parent window
child window win1
child window win2

from win1 to win2 call parent.win2.document.forms[0] etc...
0
 

Author Comment

by:csindorf
ID: 1839820
No there will only be one open window at a time but all windows will pass to form1
0
 
LVL 4

Expert Comment

by:rafistern
ID: 1839821
That is a server side problem. I suggest you submit a question to cgi area about how to do it. What scripting language do you have server-side?
0
 

Author Comment

by:csindorf
ID: 1839822
Never mind that, I found a work araound.  But one problem I did have is with the windows size in your code:
z=open("","zz",width=300,height=200);
It opens a window to the size of the browser windows.  According to your code shouldn't it be 300 x 200 in size ?

TIA
Craig
0
 
LVL 4

Expert Comment

by:rafistern
ID: 1839823
Put the width=300,height=200 in "quotes". Sorry.
0
 

Author Comment

by:csindorf
ID: 1839824
That did it, thanks.  What are the first 2 parameters for ?

"" =
"zz"=

z=open("","zz","width=300,height=200");
0
 

Author Comment

by:csindorf
ID: 1839825
never mind I found them in my book.  Thanks a heap
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article discusses how to create an extensible mechanism for linked drop downs.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now