Link to home
Start Free TrialLog in
Avatar of itortu
itortuFlag for United States of America

asked on

How to build a dynamic web form

I need to create a web tool, or dynamic web form
that offer the user a series of questions with multiple choices
for answers, based on the selection that the user makes, the answer
he will get.

i need to write this in javascript and html,
but i don't have any experience or familiarity with the scripting language.

besides answering the questions in order (q1, q2, q3) the answers
should show or hide in case that the user changes his/her mind and
goes back one or two or more questions to change the answer.

I have come up with a very simple pseudo code, and I would like to find out if
an expert can help me out with translating this into html/javascript.

In advance thank you very much for just even looking at my question.

*******************************************************************************

the first step for the user will be to select an option from the
list of vendors, i will be using only 3 vendors but there can
be more than 30 - 40.

vendor 1
vendor 2
vendor 3

the rest of the selection can be done using radio buttons in my opinion.

if vendor 1 selected then
      give answer
      show thank you message
end if      

if vendor 2 selected then
      is total purchase value > 25,000
            if yes
                  give answer
                  show thank you message
            else
                  message "you are done"
                  show thank you message
            end if
end if

if vendor 3
      if "no" then
            give text answer
            show thank you page
      end if
      if IPL then
            is purchase total < 50,000
            if yes then
                  nothing ele is required you are done
                  show thank you message
            else
                  give text answer
                  show thank you message
            end if
      end if
      if WGO then
            give text asnwer
            show thank you message
      end if
end if
Avatar of itortu
itortu
Flag of United States of America image

ASKER

I have talked to a mate and he has provided me with a sample of a web dynamic form that although used
for different purposes does a lot of the functionality I am looking for.

The only exemption is that the first option on my form needs to be a drop down list
with a list of vendors v1, v2, v3 and so on, having at the bottom a "NO" option available for the user.
and a default of "select one..."

is it possilbe someone can help me implement this into the sample I have?

than you,
sample.txt
Avatar of hielo
try:
<html>
<head>
<title>Sample Example</title>
</head>
<body>
<style type="text/css">
<!--
#guide #answer1, #guide #answer2, #guide #answer3, #guide #answer4, #guide #answer5, #guide #answer6, #guide #answer7, #guide #answer8 {
	background-color: #FFFF99;
	padding: 0px 10px 10px 0px;
	border-top: 1px solid #000033;
	border-bottom: 1px solid #000033;
}
.hideMe {
	display: none;
}
.showMe {
	display: block;
}
#guide h4, #guide p {
	padding-right: 15px;
	padding-left: 15px;
}
.answer {
	font-size: 110%;
	font-weight: bold;
}
.answertext {
	font-size: 100%;
	font-weight: bold;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true); 
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
} 
function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'block':(v=='hide')?'none':v; }
    obj.display=v; }
}
//-->
</script>
<script language="JavaScript" type="text/JavaScript">
<!--
function checkStep56() { // checks for questions 5 and 6 response and returns appropriate message
	var v5 = document.form1.question5, v5l = v5.length;
	for (i=0;i<v5l;i++) {
		if (v5[i].checked) {
			var vQuestion5 = v5[i].value;
		}
	}
	var v6 = document.form1.question6, v6l = v6.length;
	for (i=0;i<v6l;i++) {
		if (v6[i].checked) {
			var vQuestion6 = v6[i].value;
		}
	}
	if ((vQuestion5=='Monthly' || vQuestion5=='Annually' || vQuestion5=='One Time') && vQuestion6=='Yes') {
		MM_showHideLayers('answer3','','hide','answer31','','hide','answer4','','hide','answer5','','hide','answer6','','show');
	} else if ((vQuestion5=='Monthly' || vQuestion5=='Annually' || vQuestion5=='One Time') && vQuestion6=='No') {
		MM_showHideLayers('answer3','','hide','answer31','','hide','answer4','','hide','answer5','','show','answer6','','hide');
	} else {
		MM_showHideLayers('answer3','','hide','answer31','','hide','answer4','','hide','answer5','','hide','answer6','','hide');
	}
	MM_showHideLayers('thankyou','','show');
} 
function clearRadio1() { // clear radio button options
	var r = document.form1.question1, rl = r.length;
	if (!(rl==null || rl==0)) {
		for (i=0; i<rl; i++) {
			r[i].checked = false;
		}
	}
} 
function clearRadio2() { // clear radio button options
	var r = document.form1.question2, rl = r.length;
	if (!(rl==null || rl==0)) {
		for (i=0; i<rl; i++) {
			r[i].checked = false;
		}
	}
} 
function clearRadio3() { // clear radio button options
	var r = document.form1.question3, rl = r.length;
	if (!(rl==null || rl==0)) {
		for (i=0; i<rl; i++) {
			r[i].checked = false;
		}
	}
} 
function clearRadio4() { // clear radio button options
	var r = document.form1.question4, rl = r.length;
	if (!(rl==null || rl==0)) {
		for (i=0; i<rl; i++) {
			r[i].checked = false;
		}
	}
} 
function clearRadio5() { // clear radio button options
	var r = document.form1.question5, rl = r.length;
	if (!(rl==null || rl==0)) {
		for (i=0; i<rl; i++) {
			r[i].checked = false;
		}
	}
} 
function clearRadio6() { // clear radio button options
	var r = document.form1.question6, rl = r.length;
	if (!(rl==null || rl==0)) {
		for (i=0; i<rl; i++) {
			r[i].checked = false;
		}
	}
} 

function clearRadio7() { // clear radio button options
	var r = document.form1.question7, rl = r.length;
	if (!(rl==null || rl==0)) {
		for (i=0; i<rl; i++) {
			r[i].checked = false;
		}
	}
} 
function clearRadio8() { // clear radio button options
	var r = document.form1.question8, rl = r.length;
	if (!(rl==null || rl==0)) {
		for (i=0; i<rl; i++) {
			r[i].checked = false;
		}
	}
} 
function clearRadio9() { // clear radio button options
	var r = document.form1.question9, rl = r.length;
	if (!(rl==null || rl==0)) {
		for (i=0; i<rl; i++) {
			r[i].checked = false;
		}
	}
} 
function clearRadio10() { // clear radio button options
	var r = document.form1.question10, rl = r.length;
	if (!(rl==null || rl==0)) {
		for (i=0; i<rl; i++) {
			r[i].checked = false;
		}
	}
} 
function clearRadio11() { // clear radio button options
	var r = document.form1.question11, rl = r.length;
	if (!(rl==null || rl==0)) {
		for (i=0; i<rl; i++) {
			r[i].checked = false;
		}
	}
} 
function clearRadio12() { // clear radio button options
	var r = document.form1.question12, rl = r.length;
	if (!(rl==null || rl==0)) {
		for (i=0; i<rl; i++) {
			r[i].checked = false;
		}
	}
} 
function resetStep11() {
	clearRadio12();
} 
function resetStep10() {
	resetStep11();
	clearRadio11();
} 
function resetStep9() {
	resetStep10();
	clearRadio10();
} 
function resetStep8() {
	resetStep9();
	clearRadio9();
} 

function resetStep7() {
	resetStep8();
	clearRadio8();
} 
function resetStep6() {
	resetStep7();
	clearRadio7();
} 
function resetStep5() {
	resetStep6();
	clearRadio6();
} 
function resetStep4() {
	resetStep5();
	clearRadio5();
}	 
function resetStep3() {
	resetStep4();
	clearRadio4();
} 
function resetStep2() {
	resetStep3();
	clearRadio3();
} 
function resetStep1() {
	resetStep2();
	clearRadio2();
} 
function goTo(anchorname) {
	document.location.href = anchorname;
} 
function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
//-->
</script> 
<div id="guide">
	<form action="#" method="post" enctype="application/x-www-form-urlencoded" name="form1">
		<div class="showMe" id="intro">
			<p>This electronic guide has been designed to help you know how to purchase the materials and services you need. <br/>Please answer the questions as they appear, and follow the instructions. Thank you!</p>
			<p><input name="btnContinue" type="button" id="btnContinue" onClick="MM_showHideLayers('intro','','hide','step1','','show')" value="Continue"></p>
		</div>
		<div class="hideMe" id="step1">
			<table width="100%"  border="0" cellspacing="0" cellpadding="2">
				<tr>
					<td width="15">1.</td>
					<td><a name="aStep1"></a>Does the material have an inventory item identification number in PeopleSoft? </td>
				</tr>
				<tr>
					<td width="15">&nbsp;</td>
					<script>
					function determineNext(v)
					{
						if( v=="No")
						{
							MM_showHideLayers('step2','','show','step3','','hide','step4','','hide','step5','','hide','step6','','hide','step7','','hide','step8','step9','','hide','step10','','hide','','hide','step11','','hide','step12','','hide','answer1','','hide','answer2','','hide','answer3','','hide','answer31','','hide','answer4','','hide','answer5','','hide','answer6','answer7','','hide','answer8','','hide','','hide','thankyou','','hide'); resetStep1(); resetStep5(); resetStep6(); resetStep7(); goTo('#aStep2');
						}
						else
						{
							MM_showHideLayers('step2','','hide','step3','','hide','step4','','hide','step5','','hide','step6','','hide','step7','','hide','step8','','hide','step9','','hide','step10','','hide','step11','','hide','step12','','hide','answer1','','show','answer2','','hide','answer3','','hide','answer31','','hide','answer4','','hide','answer5','','hide','answer6','','hide','answer7','','hide','answer8','','hide','thankyou','','show'); resetStep1(); resetStep5(); resetStep6(); resetStep7(); goTo('#aAnswers');
						}
					}
					</script>
					<td><select name="question1" id="question1" onchange="determineNext(this.value)">
						<option value="">Make a selection</option>
						<option value="Vendor 1">Vendor 1</option>
						<option value="Vendor 2">Vendor 2</option>
						<option value="No">None</option>
					</select>
					</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
			</table>
		</div>
		<div class="hideMe" id="step2">
			<table width="100%"  border="0" cellspacing="0" cellpadding="2">
				<tr>
					<td width="15">2.</td>
					<td><a name="aStep2"></a>Is the material or service available on ezBuy or from an ezBuy supplier? </td>
				</tr>
				<tr>
					<td width="15">&nbsp;</td>
					<td><input name="question2" id="question2" type="radio" value="Yes" onClick="MM_showHideLayers('step2','','show','step3','','hide','step4','','hide','step5','','hide','step6','','hide','step7','','hide','step8','','hide','step9','','hide','step10','','hide','step11','','hide','step12','','hide','answer1','','hide','answer2','','show','answer3','','hide','answer31','','hide','answer4','','hide','answer5','','hide','answer6','','hide','answer7','','hide','answer8','','hide','thankyou','','show'); resetStep2(); resetStep5(); resetStep6(); resetStep7(); goTo('#aAnswers');"> Yes</td>
				</tr>
				<tr>
					<td width="15">&nbsp;</td>
					<td><input name="question2" id="question2" type="radio" value="No" onClick="MM_showHideLayers('step2','','show','step3','','show','step4','','hide','step5','','hide','step6','','hide','step7','','hide','step8','','hide','step9','','hide','step10','','hide','step11','','hide','step12','','hide','answer1','','hide','answer2','','hide','answer3','','hide','answer31','','hide','answer4','','hide','answer5','','hide','answer6','','hide','answer7','','hide','answer8','','hide','thankyou','','hide'); resetStep2(); resetStep5(); resetStep6(); resetStep7(); goTo('#aStep3');"> No</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
			</table>
		</div>
		<div class="hideMe" id="step3">
			<table width="100%"  border="0" cellspacing="0" cellpadding="2">
				<tr>
					<td width="15">3.</td>
					<td><a name="aStep3"></a>Is this purchase for greater than $5000? If you are unsure, simply estimate the value.</td>
				</tr>
				<tr>
					<td width="15">&nbsp;</td>
					<td><input name="question3" id="question3" type="radio" value="Yes" onClick="MM_showHideLayers('step2','','show','step3','','show','step4','','hide','step5','','hide','step6','','hide','step7','','show','step8','','hide','step9','','hide','step10','','hide','step11','','hide','step12','','hide','answer1','','hide','answer2','','hide','answer3','','hide','answer31','','hide','answer4','','hide','answer5','','hide','answer6','','hide','answer7','','hide','answer8','','hide','thankyou','','hide'); resetStep3(); resetStep5(); resetStep6(); resetStep7(); goTo('#aAnswers');"> Yes</td>
				</tr>
				<tr>
					<td width="15">&nbsp;</td>
					<td><input name="question3" id="question3" type="radio" value="No" onClick="MM_showHideLayers('step2','','show','step3','','show','step4','','show','step5','','hide','step6','','hide','step7','','hide','step8','','hide','step9','','hide','step10','','hide','step11','','hide','step12','','hide','answer1','','hide','answer2','','hide','answer3','','hide','answer31','','hide','answer4','','hide','answer5','','hide','answer6','','hide','answer7','','hide','answer8','','hide','thankyou','','hide'); resetStep3(); resetStep5(); resetStep6(); resetStep7(); goTo('#aStep4');"> No</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
			</table>
		</div>
		<div class="hideMe" id="step4">
			<table width="100%"  border="0" cellspacing="0" cellpadding="2">
				<tr>
					<td width="15">4.</td>
					<td><a name="aStep4"></a>Does this purchase involve risk? </td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Examples of risk include:</p>
						<ul>
							<li>The product requires a Material Safety Data Sheet (MSDS sheet)</li>
							<li>Contractor(s) will be coming to a company building or site</li>
							<li>A supplier requests that you sign a contract</li>
						</ul>
					</td>
				</tr>
				<tr>
					<td width="15">&nbsp;</td>
					<td><input name="question4" id="question4" type="radio" value="Yes" onClick="MM_showHideLayers('step2','','show','step3','','show','step4','','show','step5','','hide','step6','','hide','step7','','hide','step8','','hide','step9','','hide','step10','','hide','step11','','show','step12','','hide','answer1','','hide','answer2','','hide','answer3','','hide','answer31','','hide','answer4','','hide','answer5','','hide','answer6','','hide','answer7','','hide','answer8','','hide','thankyou','','hide'); resetStep4(); resetStep5(); resetStep6(); resetStep7(); goTo('#aAnswers');"> Yes</td>
				</tr>
				<tr>
					<td width="15">&nbsp;</td>
					<td><input name="question4" id="question4" type="radio" value="No" onClick="MM_showHideLayers('step2','','show','step3','','show','step4','','show','step5','','show','step6','step7','','hide','step8','','hide','','hide','step9','','hide','step10','','hide','step11','','hide','step12','','hide','answer1','','hide','answer2','','hide','answer3','','hide','answer31','','hide','answer4','','hide','answer5','','hide','answer6','','hide','answer7','','hide','answer8','','hide','thankyou','','hide'); resetStep4(); resetStep5(); resetStep6(); resetStep7(); goTo('#aStep5');"> No</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td>Don't know? Please contact the buyer who assists your department.</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
			</table>
		</div>
		<div class="hideMe" id="step5">
			<table width="100%"  border="0" cellspacing="0" cellpadding="2">
				<tr>
					<td width="15">5.</td>
					<td><a name="aStep5"></a>How often do you purchase this material or service from this vendor? </td>
				</tr>
				<tr>
					<td width="15">&nbsp;</td>
					<td><input name="question5" id="question5" type="radio" value="Daily" onClick="MM_showHideLayers('step2','','show','step3','','show','step4','','show','step5','','show','step6','','hide','step7','','hide','step8','','hide','step9','','hide','step10','','hide','step11','','hide','step12','','hide','answer1','','hide','answer2','','hide','answer3','','show','answer31','','hide','answer4','','hide','answer5','','hide','answer6','','hide','answer7','','hide','answer8','','hide','thankyou','','show'); resetStep5(); resetStep6(); resetStep7(); goTo('#aAnswers');"> Daily</td>
				</tr>
				<tr>
					<td width="15">&nbsp;</td>
					<td><input name="question5" id="question5" type="radio" value="Weekly" onClick="MM_showHideLayers('step2','','show','step3','','show','step4','','show','step5','','show','step6','','hide','step7','','hide','step8','','hide','step9','','hide','step10','','hide','step11','','hide','step12','','hide','answer1','','hide','answer2','','hide','answer3','','show','answer31','','hide','answer4','','hide','answer5','','hide','answer6','','hide','answer7','','hide','answer8','','hide','thankyou','','show'); resetStep5(); resetStep6(); resetStep7(); goTo('#aAnswers');"> Weekly</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td><input name="question5" id="question5" type="radio" value="Monthly" onClick="MM_showHideLayers('step2','','show','step3','','show','step4','','show','step5','','show','step6','','show','step7','','hide','step8','','hide','step9','','hide','step10','','hide','step11','','hide','step12','','hide','answer1','','hide','answer2','','hide','answer3','','hide','answer31','','hide','answer4','','hide','answer5','','hide','answer6','','hide','answer7','','hide','answer8','','hide','thankyou','','hide'); resetStep5(); resetStep6(); resetStep7(); goTo('#aStep6');"> Monthly</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td><input name="question5" id="question5" type="radio" value="Annually" onClick="MM_showHideLayers('step2','','show','step3','','show','step4','','show','step5','','show','step6','','show','step7','','hide','step8','','hide','step9','','hide','step10','','hide','step11','','hide','step12','','hide','answer1','','hide','answer2','','hide','answer3','','hide','answer31','','hide','answer4','','hide','answer5','','hide','answer6','','hide','answer7','','hide','answer8','','hide','thankyou','','hide'); resetStep5(); resetStep6(); resetStep7(); goTo('#aStep6');"> Annually</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td><input name="question5" id="question5" type="radio" value="One Time" onClick="MM_showHideLayers('step2','','show','step3','','show','step4','','show','step5','','show','step6','','show','step7','','hide','step8','','hide','step9','','hide','step10','','hide','step11','','hide','step12','','hide','answer1','','hide','answer2','','hide','answer3','','hide','answer31','','hide','answer4','','hide','answer5','','hide','answer6','','hide','answer7','','hide','answer8','','hide','thankyou','','hide'); resetStep5(); resetStep6(); resetStep7(); goTo('#aStep6');"> One Time</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
			</table>
		</div>
		<div class="hideMe" id="step6">
			<table width="100%"  border="0" cellspacing="0" cellpadding="2">
				<tr>
					<td width="15">6.</td>
					<td><a name="aStep6"></a>Does the Supplier accept Master Card? </td>
				</tr>
				<tr>
					<td width="15">&nbsp;</td>
					<td><input name="question6" id="question6" type="radio" value="Yes" onClick="checkStep56(); goTo('#aAnswers');"> Yes</td>
				</tr>
				<tr>
					<td width="15">&nbsp;</td>
					<td><input name="question6" id="question6" type="radio" value="No" onClick="checkStep56(); goTo('#aAnswers');"> No</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
			</table>
		</div>
		<div class="hideMe" id="step7">
			<table width="100%"  border="0" cellspacing="0" cellpadding="2">
				<tr>
					<td width="15">4.</td>
					<td><a name="aStep7"></a>Are you purchasing materials or services?</td>
				</tr>
				<tr>
					<td width="15">&nbsp;</td>
					<td><input name="question7" id="question7" type="radio" value="Yes" onClick="MM_showHideLayers('step2','','show','step3','','show','step4','','hide','step5','','hide','step6','','hide','step7','','show','step8','','hide','step9','','hide','step10','','hide','step11','','hide','step12','','hide','answer1','','hide','answer2','','hide','answer3','','hide','answer31','','hide','answer4','','show','answer5','','hide','answer6','','hide','answer7','','hide','answer8','','hide','thankyou','','show'); goTo('#aAnswers');">Materials</td>
				</tr>
				<tr>
					<td width="15">&nbsp;</td>
					<td><input name="question7" id="question7" type="radio" value="No"  onClick="MM_showHideLayers('step2','','show','step3','','show','step4','','hide','step5','','hide','step6','','hide','step7','','show','step8','','show','step9','','hide','step10','','hide','step11','','hide','step12','','hide','answer1','','hide','answer2','','hide','answer3','','hide','answer31','','hide','answer4','','hide','answer5','','hide','answer6','','hide','answer7','','hide','answer8','','hide','thankyou','','hide'); goTo('#aAnswers');">Services</td>
				</tr>
				<tr>
					<td width="15">&nbsp;</td>
					<td><input name="question7" id="question7" type="radio" value="No" onClick="MM_showHideLayers('step2','','show','step3','','show','step4','','hide','step5','','hide','step6','','hide','step7','','show','step8','','hide','step9','','hide','step10','','hide','step11','','hide','step12','','hide','answer1','','hide','answer2','','hide','answer3','','hide','answer31','','hide','answer4','','hide','answer5','','hide','answer6','','hide','answer7','','hide','answer8','','show','thankyou','','show'); goTo('#aAnswers');">Both</td>
				</tr>			
				<tr>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
			</table>
		</div>	
		<div class="hideMe" id="step8">
			<table width="100%"  border="0" cellspacing="0" cellpadding="2">
				<tr>
					<td width="15">5.</td>
					<td><a name="aStep8"></a>Do you expect to receive multiple invoices, over time?</td>
				</tr>
				<tr>
					<td width="15">&nbsp;</td>
					<td><input name="question8" id="question8" type="radio" value="Yes" onClick="MM_showHideLayers('step2','','show','step3','','show','step4','','hide','step5','','hide','step6','','hide','step7','','show','step8','','hide','step9','','hide','step10','','hide','step11','','hide','step12','','hide','answer1','','hide','answer2','','hide','answer3','','hide','answer31','','hide','answer4','','hide','answer5','','hide','answer6','','hide','answer7','','show','answer8','','hide','step8','','show','thankyou','','show'); goTo('#aAnswers');">Yes</td>
				</tr>
				<tr>
					<td width="15">&nbsp;</td>
					<td><input name="question8" id="question8" type="radio" value="No" onClick="MM_showHideLayers('step2','','show','step3','','show','step4','','hide','step5','','hide','step6','','hide','step7','','show','step8','','hide','step9','','hide','step10','','hide','step11','','hide','step12','','hide','answer1','','hide','answer2','','hide','answer3','','hide','answer31','','hide','answer4','','show','answer5','','hide','answer6','','hide','answer7','','hide','answer8','','hide','step8','','show','thankyou','','show'); goTo('#aAnswers');">No</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
			</table>
		</div>
		<div class="hideMe" id="step9">
			<table width="100%"  border="0" cellspacing="0" cellpadding="2">
				<tr>
					<td width="15">5.</td>
					<td><a name="aStep9"></a>Are you purchasing materials or services?</td>
				</tr>
				<tr>
					<td width="15">&nbsp;</td>
					<td><input name="question9" id="question9" type="radio" value="Yes" onClick="MM_showHideLayers('step2','','show','step3','','show','step4','','hide','step5','','hide','step6','','hide','step7','','show','step8','','hide','step9','','show','step10','','hide','step11','','hide','step12','','hide','answer1','','hide','answer2','','hide','answer3','','hide','answer31','','hide','answer4','','show','answer5','','hide','answer6','','hide','answer7','','hide','answer8','','hide','thankyou','','show'); goTo('#aAnswers');">Materials</td>
				</tr>
				<tr>
					<td width="15">&nbsp;</td>
					<td><input name="question9" id="question9" type="radio" value="No"  onClick="MM_showHideLayers('step2','','show','step3','','show','step4','','hide','step5','','hide','step6','','hide','step7','','show','step8','','hide','step9','','show','step10','','show','step11','','hide','step12','','hide','answer1','','hide','answer2','','hide','answer3','','hide','answer31','','hide','answer4','','hide','answer5','','hide','answer6','','hide','answer7','','hide','answer8','','hide','thankyou','','hide'); goTo('#aAnswers');">Services</td>
				</tr>
				<tr>
					<td width="15">&nbsp;</td>
					<td><input name="question9" id="question9" type="radio" value="No" onClick="MM_showHideLayers('step2','','show','step3','','show','step4','','hide','step5','','hide','step6','','hide','step7','','show','step8','','hide','step9','','show','step10','','hide','step11','','hide','step12','','hide','answer1','','hide','answer2','','hide','answer3','','hide','answer31','','hide','answer4','','hide','answer5','','hide','answer6','','hide','answer7','','hide','answer8','','show','thankyou','','show'); goTo('#aAnswers');">Both</td>
				</tr>			
				<tr>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
			</table>
		</div>	
		<div class="hideMe" id="step10">
			<table width="100%"  border="0" cellspacing="0" cellpadding="2">
				<tr>
					<td width="15">6.</td>
					<td><a name="aStep10"></a>Do you expect to receive multiple invoices, over time?</td>
				</tr>
				<tr>
					<td width="15">&nbsp;</td>
					<td><input name="question10" id="question10" type="radio" value="Yes" onClick="MM_showHideLayers('step2','','show','step3','','show','step4','','hide','step5','','hide','step6','','hide','step7','','show','step8','','hide','step9','','show','step10','','show','step11','','hide','step12','','hide','answer1','','hide','answer2','','hide','answer3','','hide','answer31','','hide','answer4','','hide','answer5','','hide','answer6','','hide','answer7','','show','answer8','','hide','step8','','show','thankyou','','show'); goTo('#aAnswers');">Yes</td>
				</tr>
				<tr>
					<td width="15">&nbsp;</td>
					<td><input name="question10" id="question10" type="radio" value="No" onClick="MM_showHideLayers('step2','','show','step3','','show','step4','','hide','step5','','hide','step6','','hide','step7','','show','step8','','hide','step9','','show','step10','','show','step11','','hide','step12','','hide','answer1','','hide','answer2','','hide','answer3','','hide','answer31','','hide','answer4','','show','answer5','','hide','answer6','','hide','answer7','','hide','answer8','','hide','step8','','show','thankyou','','show'); goTo('#aAnswers');">No</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
			</table>
		</div>	
		<div class="hideMe" id="step11">
			<table width="100%"  border="0" cellspacing="0" cellpadding="2">
				<tr>
					<td width="15">5.</td>
					<td><a name="aStep11"></a>Are you purchasing materials or services?</td>
				</tr>
				<tr>
					<td width="15">&nbsp;</td>
					<td><input name="question11" id="question11" type="radio" value="Yes" onClick="MM_showHideLayers('step2','','show','step3','','show','step4','','show','step5','','hide','step6','','hide','step7','','hide','step8','','hide','step9','','hide','step10','','hide','step11','','show','step12','','hide','answer1','','hide','answer2','','hide','answer3','','hide','answer31','','hide','answer4','','show','answer5','','hide','answer6','','hide','answer7','','hide','answer8','','hide','thankyou','','show'); goTo('#aAnswers');">Materials</td>
				</tr>
				<tr>
					<td width="15">&nbsp;</td>
					<td><input name="question11" id="question11" type="radio" value="No"  onClick="MM_showHideLayers('step2','','show','step3','','show','step4','','show','step5','','hide','step6','','hide','step7','','hide','step8','','hide','step9','','hide','step10','','hide','step11','','show','step12','','show','answer1','','hide','answer2','','hide','answer3','','hide','answer31','','hide','answer4','','hide','answer5','','hide','answer6','','hide','answer7','','hide','answer8','','hide','thankyou','','hide'); goTo('#aAnswers');">Services</td>
				</tr>
				<tr>
					<td width="15">&nbsp;</td>
					<td><input name="question11" id="question11" type="radio" value="No" onClick="MM_showHideLayers('step2','','show','step3','','show','step4','','show','step5','','hide','step6','','hide','step7','','hide','step8','','hide','step9','','hide','step10','','hide','step11','','show','step12','','hide','answer1','','hide','answer2','','hide','answer3','','hide','answer31','','hide','answer4','','hide','answer5','','hide','answer6','','hide','answer7','','hide','answer8','','show','thankyou','','show'); goTo('#aAnswers');">Both</td>
				</tr>			
				<tr>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
			</table>
		</div>	
		<div class="hideMe" id="step12">
			<table width="100%"  border="0" cellspacing="0" cellpadding="2">
				<tr>
					<td width="15">6.</td>
					<td><a name="aStep12"></a>Do you expect to receive multiple invoices, over time?</td>
				</tr>
				<tr>
					<td width="15">&nbsp;</td>
					<td><input name="question12" id="question12" type="radio" value="Yes" onClick="MM_showHideLayers('step2','','show','step3','','show','step4','','show','step5','','hide','step6','','hide','step7','','hide','step8','','hide','step9','','hide','step10','','hide','step11','','show','step12','','show','answer1','','hide','answer2','','hide','answer3','','hide','answer31','','hide','answer4','','hide','answer5','','hide','answer6','','hide','answer7','','show','answer8','','hide','thankyou','','show'); goTo('#aAnswers');">Yes</td>
				</tr>
				<tr>
					<td width="15">&nbsp;</td>
					<td><input name="question12" id="question12" type="radio" value="No" onClick="MM_showHideLayers('step2','','show','step3','','show','step4','','show','step5','','hide','step6','','hide','step7','','hide','step8','','hide','step9','','hide','step10','','hide','step11','','show','step12','','show','answer1','','hide','answer2','','hide','answer3','','hide','answer31','','hide','answer4','','show','answer5','','hide','answer6','','hide','answer7','','hide','answer8','','hide','thankyou','','show'); goTo('#aAnswers');">No</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
			</table>
		</div>	
		<div id="answers"><a name="aAnswers"></a>
			<div class="hideMe" id="answer1">
				<p class="answer">Answer:</p>
				<p class="answertext">Contact your Storekeeper or Local Material Coordinator.</p>
			</div>
			<div class="hideMe" id="answer2">
				<p class="answer">Answer:</p>
				<p class="answertext">Create an ezBuy Requisition.</p>
				<p>If you are unsure how to create an ezBuy requisition, please contact the Help Desk for assistance or view these <a href="/wcm/html/011540.html">ezBuy Training topics</a>.</p>
			</div>
			<div class="hideMe" id="answer3">
				<p class="answer">Answer:</p>
				<p class="answertext">Create a Purchase Requisition in PeopleSoft.</p>
				<div class="showMe" id="answer31">
				<p>Optionally, you may use your corporate credit card for this purchase. However, due to the frequency of credit card reconciliation, you may want to contact the buyer to learn about better ways of purchasing this material or service.</p>
			</div>
			</div>
			<div class="hideMe" id="answer4">
				<p class="answer">Answer:</p>
				<p class="answertext">Create a Purchase Requisition in PeopleSoft.</p>
				<p>Ensure you let the buyer know how often you plan on purchasing this material or service.</p>
			</div>
			<div class="hideMe" id="answer5">
				<p class="answer">Answer:</p>
				<p class="answertext">It would be best to use a supplier in your area that accepts Mastercard. Many suppliers do accept MasterCard and using them helps reduce our costs for processing low-dollar invoices. You may use a Tax Stamp (Form #75-1525) for this purchase if you will receive an invoice. You can use a Payment Request Form (Form #75-0658) if you do not expect to receive an invoice in the case of donations, filing fees, postage, property damage, tax payments and vehicle licensing.</p>
			</div>
			<div class="hideMe" id="answer6">
				<p class="answer">Answer:</p>
				<p class="answertext">Use your corporate credit card for this purchase.</p>
			</div>
			<div class="hideMe" id="answer7">
				<p class="answer">Answer:</p>
				<p class="answertext">Create a Purchase Requisition in PeopleSoft and ask the buyer to create an "Amount Only" type Purchase Order.</p>
				<p>Ensure you let the buyer know how often you plan on purchasing this material or service.</p>
			</div>	
			<div class="hideMe" id="answer8">
				<p class="answer">Answer:</p>
				<p class="answertext">Create a Purchase Requisition in PeopleSoft and discuss with your buyer the best way to structure the purchase order.</p>
				<p>Ensure you let the buyer know how often you plan on purchasing this material	or service.</p>
			</div>				
			<div class="hideMe" id="thankyou">
				<p class="answer">Thank you for using ProcurePro.</p>
				<p>If you need additional assistance, please contact the buyer who assists your department.</p>
				<p><input name="playagain" type="submit" value="Use the Procurement Guide again"></p>
			</div>
		</div>
	</form>
</div>
</body>
</html>

Open in new window

Avatar of itortu

ASKER

Hello,

I apologize for taking so long to get back to you. I spend last week working on this task and some others.

I think I have adjust your code and the preexisting code to work the way I need it to work.

The only think I am still due to figure out how to do is to reset each of the form objects as the user can go back one or several steps in the form questionnaire.

Would anyone be able to tell me if I can get help to implement in the form's code?

I am attaching a copy of the file.


dynamic-form.txt
Avatar of itortu

ASKER

I think the problem I have happens when "other" is selected from the drop down list, step 2 is shown with 3 radio buttons, the first radio button is selected by default, but i would like for the 3 radio buttons to be unselected.

then when step 3 shows up, and the user goes back to step 1 and selects another vendor of the "other" type, the step should go back to step #2 with unselected radio buttons.

i hope someone can offer a hand of help.

thank you much,

ASKER CERTIFIED SOLUTION
Avatar of hielo
hielo
Flag of Wallis and Futuna image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
itortu, next time please reply in more timely manner. I don't see the notifications sent by EE because I don't keep up with my email. Typically if you don't answer within the same day, I will loose track of the problems due to the volume of questions I answer. As I answer more and more questions, the older (unclosed) questions keep getting buried in my pile of opened questions. I try my best, but it's hard to keep up. I apologize for the late reply. Hopefully you will still find it useful/helpful.

Regards,
Hielo
Avatar of itortu

ASKER

Thank you Hielo for your help. I will keep in mind to respond promptly when my question receives an expert comment next time.


I will go ahead an close the question since the last code you provided helped me clear a bunch of code I did not need.

Thank you.
glad to help