»
EnglishFrenchVietnamese

Print - ShowDivP2 - JavaScriptBank.com

Full version: jsB@nk » Form » Dropdown » ShowDivP2
URL: https://www.javascriptbank.com/showdivp2.html

ShowDivP2 © JavaScriptBank.comA function for dynamic form composition from a Select option. Displays a Div from several, which may contain form items, based on a select choice; with a common second Div to all selections. Used here with ShowSub which shows the submit box after user checks input. Additionally there is a required hidden input value set in the function to a string based on the Select value.

Full version: jsB@nk » Form » Dropdown » ShowDivP2
URL: https://www.javascriptbank.com/showdivp2.html



JavaScript
<SCRIPT>//set last shown pointer to nonevar kar = 0var sP = new Array(8)sP[0] = "Title0";sP[1] = "Title1";sP[2] = "Title2";sP[3] = "Title3";sP[4] = "Title4";sP[5] = "Title5";sP[6] = "Title6";sP[7] = "Title7";sP[8] = "Title8";function ShowDivP2(SelId, DivId, P2Id, ReqVal)<!-- Another small but powerful function by Ira --><!-- Original Programmed by Ira Sterbakov - irasterb@erols.com 9/5/04 --><!-- May be freely used and modified - email notification would be nice -->{num = document.getElementById(SelId).value;document.getElementById(P2Id).style.display = 'none'; if( kar > 0){//clear last shown//get divisionvar DivId1 = DivId + kar;//change display to nonedocument.getElementById(DivId1).style.display = 'none';kar = 0}if( num > 0){//get divisionvar DivId2 = DivId + num;//change display to blockdocument.getElementById(DivId2).style.display = 'block';document.getElementById(P2Id).style.display = 'block';kar=num}//set required field value relaed to select to array string based on numdocument.getElementById(ReqVal).value = sP[num]}function ShowSub(SSelId, SDivId)<!-- Another small but powerful function by Ira --><!-- Original Programmed by Ira Sterbakov - irasterb@erols.com 9/5/04 --><!-- May be freely used and modified - email notification would be nice -->{Snum = document.getElementById(SSelId).value if( Snum == 1){//change display to blockdocument.getElementById(SDivId).style.display = 'block';}if( Snum == 0){//change display to nonedocument.getElementById(SDivId).style.display = 'none';}}</SCRIPT><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<FORM action=sendpick.php method=post><INPUT id=req1 type=hidden value=Title0 name=titleval><FONT color=#ff0000>Static part of form:</FONT> <INPUT size=40 name=Silly><BR><BR>Select which category: <SELECT id=catItems onchange="javascript: ShowDivP2('catItems','divSubcat','divp2','req1');">   <OPTION value=0 selected>- category -<OPTION value=1>First<OPTION   value=2>Second<OPTION value=3>Third</OPTION></SELECT><BR><BR><FONT color=#ff0000 size=5>Dynamic part of Form:</FONT> <DIV id=divSubcat1 style="DISPLAY: none"><BR><B>Choose type of Item 1:</B><BR><BR><INPUT type=radio value=red1 name=Subcat1>Red<BR><INPUT type=radio value=white name=Subcat1>White<BR><INPUT type=radio value=yellow name=Subcat1>Yellow<BR><FONT color=green>Title:   <INPUT type="text' value=" items1 size="20"?></FONT><BR></DIV><DIV id=divSubcat2 style="DISPLAY: none"><BR><B>Choose type of Item 2:</B><BR><BR><SELECT name=Subcat2> <OPTION selected value-?red2?>Red<OPTION   value=white>White<OPTION value=yellow>Yellow</OPTION></SELECT><BR></DIV><DIV id=divSubcat3 style="DISPLAY: none"><BR><B>Choose type of Item 3:</B><BR><BR><INPUT type=radio value=red3 name=Subcat3>Red<BR><INPUT type=radio value=white name=Subcat3>White<BR><INPUT type=radio value=yellow name=Subcat3>Yellow<BR></DIV><DIV id=divp2 style="DISPLAY: none"><BR><FONT color=#ff0000 size=+1>Common to all selections</FONT><BR><BR><H3>Required ID Fields</H3><INPUT size=40 name=name> Name<BR><INPUT size=40 name=ordnum> Order Number<BR><INPUT size=40 name=vemail> Email Address for verification<BR><BR><BR><FONT size=4>Using ShowSub</FONT><BR><BR><FONT color=red size=+1>Did you verify? <SELECT id=SubOK onchange="javascript: ShowSub('SubOK','Subp1');"> <OPTION value=0   selected>No<OPTION value=1>Yes</OPTION></SELECT></FONT><BR></DIV><DIV id=Subp1 style="DISPLAY: none"><BR><FONT color=red size=+1>Please Submit Your Information <INPUT type=submit value="Send it in!"></FONT><BR></DIV></FORM><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->