Jump to content

[SOLVED] Cut form in to multiple parts


EagerWolf

Recommended Posts

I have created a data input form... It is pretty large...

 

How can I make forms in more steps ...

 

I've tried with php now ...

 

The problem is when you call next step data isn't stored in session, because href="link to next page" and in that case onClick does't work...

So if this part of form isn't subbmited, how should I submit it... I tried to to call another file which stores data directly in DB... It works .. but I am still not happy..

 

Is it possible to add forms in multiple div layers and show only one and than with next and back button go trough parts... I've searched trough internet but didn't find anything useful..

Link to comment
https://forums.phpfreaks.com/topic/39795-solved-cut-form-in-to-multiple-parts/
Share on other sites

That is more difficult.  Simply have forms go from page to page.

 

Page 1 => page 2 (validate page 1, then show page 2 if it's clear) => page 3 (validate page 2, show page 3 if it's clean) => page 4 (validate page 3, do database or whatever other work)

 

Pretty simple when you get use to it.  You can pass them all using hidden form fields.  Your best bet, is on each page to register a session, then with a little work you can have it where at the end they can have a review form to go back to any section of the form to make corrections without disturbing the data, or the other parts of the form.

 

 

Is it possible to add forms in multiple div layers and show only one and than with next and back button go trough parts... I've searched trough internet but didn't find anything useful..

 

I searched through my library of code samples and found this.

 

<HTML>
<HEAD>
<meta Name="generator" content="PHPEd Version 3.1.2 (Build 3165)">
<title>sample paged form</title>
<meta Name="author" content="barand">

<STYLE>
table {font-family: verdana,arial,helvetica,sans-serif;
      font-size: 9pt;
      background-color: #F7F7F7;
      height: 200px;
      }
label {
       color: black;
       font-size: 8pt;
       border-top: 1pt solid black;
       border-left: 1pt solid black;
       border-bottom: 1pt solid #CCCCCC;
       border-right: 1pt solid #CCCCCC;
       background-color:#CADFDF;
       width: 100%;
       padding: 4px
       }
label.declare {
      width: 100%
      }
label.pagetitle {
       border-top: 1pt solid white;
       border-left: 1pt solid white;
       border-bottom: 1pt solid black;
       border-right: 1pt solid black;
      background-color:#EEDC9D;
      font-size: 10pt;
      font-weight: 700;
      width: 300px;
      text-align: center
      }
div.prev {
      float: left
}
div.next {
      float: right;
}
div.leftblock {
    float: left;
    height: 500px;
    width: 150px;
    border-right: 1pt dotted #EEDC9D;
    margin-right:10px;
    text-align: center
}
</STYLE>

<SCRIPT LANGUAGE='javascript'>
function showDiv(divid) {
         document.getElementById("driver").style.visibility="hidden";
         document.getElementById("vehicle").style.visibility="hidden";
         document.getElementById("submit").style.visibility="hidden";
         document.getElementById(divid).style.visibility="visible";
}
</SCRIPT>

</HEAD>
<BODY>
<?php
if (isset($_POST['submit'])) {

    echo '<DIV style="position:absolute; top:400"> 
        <pre> Form data ';
    print_r ($_POST);
    echo '</pre>
        </DIV>' ;

} 

?>

<DIV class="leftblock">

<INPUT TYPE='BUTTON' style='width:90px' name='btn1' value='Driver'   onClick='showDiv("driver");'>
<INPUT TYPE='BUTTON' style='width:90px' name='btn2' value='Vehicle'   onClick='showDiv("vehicle");'>
<INPUT TYPE='BUTTON' style='width:90px' name='btn3' value='Submission'   onClick='showDiv("submit");'>

</DIV>

<DIV>

<FORM name='fmApply' method='POST' ACTION=''>

<DIV id='driver' style="visibility: visible; position: absolute; top: 15px; width:300px">
<label class='pagetitle'>Driver details</label>
<TABLE cellspacing='0' cellpadding='3' width=300>
   <TR>
      <TD>
         <label>Name</label>
      </TD>
      <TD>
         <INPUT TYPE='TEXT'  name='drivername' SIZE=25>
      </TD>
   </TR>
   <TR valign='top'>
      <TD>
         <label>Address</label>
      </TD>
      <TD>
         <TEXTAREA  name='driveraddress' COLS='20' ROWS='5'></TEXTAREA>
      </TD>
   </TR>
   <TR>
      <TD>
          <label>Age</label>
      </TD>
      <TD>
          <INPUT TYPE='TEXT'  name='driverage' SIZE=5>
      </TD>
   </TR>
   <TR>
      <TD>
        <label>No-claims</label>
      </TD>
      <TD>
         <INPUT TYPE='TEXT'  name='noclaims' SIZE=5'> years
      </TD>
   </TR>
</TABLE>
<label class='pagetitle'><div class='next'><input type='button' value='>' onclick='showDiv("vehicle");'></div></a></label>

</DIV>


<DIV id='vehicle' style="visibility: hidden; position: absolute; top: 15px; width:300px">
<label class='pagetitle'>Vehicle details</label>
<TABLE cellspacing='0'  cellpadding='3' width=300>
   <TR>
      <TD>
         <label>Make</label>
      </TD>
      <TD>
         <INPUT TYPE='TEXT'  name='carmake' SIZE=25>
      </TD>
   </TR>
   <TR>
      <TD>
          <label>Model</label>
      </TD>
      <TD>
          <INPUT TYPE='TEXT'  name='carmodel' SIZE=15>
      </TD>
   </TR>
   <TR>
      <TD>
        <label>Engine size</label>
      </TD>
      <TD>
         <INPUT TYPE='TEXT'  name='carcc' SIZE=5'> cc
      </TD>
   </TR>
</TABLE>
<label class='pagetitle'>
<div class='prev'><input type='button' value='<' onclick='showDiv("driver");'></div>
<div class='next'><input type='button' value='>' onclick='showDiv("submit");'></div>
</label>
</DIV>


<DIV id='submit' style="visibility: hidden; position: absolute; top: 15px; width:300px">
<label class='pagetitle'>Form submission</label>
<TABLE cellspacing='0' cellpadding='3' width=300>
   <TR>
      <TD>
         <INPUT TYPE='checkbox'  name='declare' VALUE='Y'>
      </TD>
      <TD>
         <label class='declare'>I declare that the information entered is accurate
         to the best of my knowledge </label>
      </TD>
   </TR>
   <TR>
      <TD>
         
      </TD>
      <TD>
         <INPUT TYPE='SUBMIT' name='submit'  value='Submit'>
      </TD>
   </TR>
</TABLE>
<label class='pagetitle'><div class='prev'><input type='button' value='<' onclick='showDiv("vehicle");'></div></label>
</DIV>

</FORM>
</DIV>
</BODY>
</HTML>

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.