EagerWolf Posted February 23, 2007 Share Posted February 23, 2007 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.. Quote Link to comment Share on other sites More sharing options...
Ninjakreborn Posted February 23, 2007 Share Posted February 23, 2007 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. Quote Link to comment Share on other sites More sharing options...
Barand Posted February 23, 2007 Share Posted February 23, 2007 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> Quote Link to comment Share on other sites More sharing options...
EagerWolf Posted February 24, 2007 Author Share Posted February 24, 2007 thanks! That is what I've been looking for! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.