long form

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  
csindorfAsked:
Who is Participating?
 
rafisternConnect With a Mentor Commented:
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
 
rafisternCommented:
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
 
csindorfAuthor Commented:
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
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

 
pluimCommented:
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
 
csindorfAuthor Commented:
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
 
rafisternCommented:
In place of:

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

use:

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

0
 
csindorfAuthor Commented:
Outstanding, thanks a heap
0
 
csindorfAuthor Commented:
rafistern did I forget to click on the grade ???????
0
 
rafisternCommented:
You did grade me. No problem. Thanks for the points :-)
0
 
csindorfAuthor Commented:
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
 
rafisternCommented:
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
 
csindorfAuthor Commented:
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
 
rafisternCommented:
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
 
csindorfAuthor Commented:
No not pop ups inside of pop up but a link that would actually call another form on the site.
0
 
rafisternCommented:
..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
 
csindorfAuthor Commented:
No there will only be one open window at a time but all windows will pass to form1
0
 
rafisternCommented:
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
 
csindorfAuthor Commented:
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
 
rafisternCommented:
Put the width=300,height=200 in "quotes". Sorry.
0
 
csindorfAuthor Commented:
That did it, thanks.  What are the first 2 parameters for ?

"" =
"zz"=

z=open("","zz","width=300,height=200");
0
 
csindorfAuthor Commented:
never mind I found them in my book.  Thanks a heap
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.