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

asked on

Display/Hide form questions based on previous answers.

I am working on a dynamic form. It works but there are still a few fixes that I can't yet figured out.

Such as how to reset each of the form objects as the user can go back one or several steps in the form questionnaire.

If you look inside the function determineNext, you will see how the hide/show is decided.
The problem happens when one of the "Other" options is selected from the drop down list.
When that occurs, step 2 is shown with 3 radio buttons.
The first radio button is selected by default, and I need this to be unselected the first time before any selection.

Another part of the problem, when step 3 shows up under the "Other" options path, if 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 this makes sense and that someone can help me out.

thank you very much.
i hope someone can offer a hand of help.
dynamic-form.txt
Avatar of itortu
itortu
Flag of United States of America image

ASKER

i guess what i want to say is that the user changes the selection on the drop down from an item of the "other" kind to another of the same type, then the steps 3 needs to be hid and step 2 radio buttons reset.
Avatar of hielo
>>mysql_select_db($database_seadb);
did you mean mysqli_select_db?
my apologies. Wrong post :(
Avatar of itortu

ASKER

I am sorry I am not following you.
Avatar of itortu

ASKER

I have it almost working, the only thing that is not working right, is how to call the function that clears the radio buttons.

right now, if i select option "Other"

and then make a selection on step 2
when I select radio button on step 3, the selection of step 2 is cleared.
I think I am calling the function too many times without enough conditions.

I trule appreciate some help.

Thank you.
<!--$include html_page_top-->
 
<script language="JavaScript" type="text/JavaScript">
 
<!--
 
function MM_reloadPage(init) 
{  
  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 ) 
{ 
  var p;
  var i;
  var 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() 
{
  var i;
  var p;
  var v;
  var 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 determineNext(v)
{
	if( v == "No" )
	
	{ 
		MM_showHideLayers('rmt', '', 'hide', 'thankyou', '', 'show', 'atc_1', '', 'hide', 'atc_yes', '', 'hide', 'atc_no', '', 'hide', 'oStep1', '', 'hide', 'contact_legal', '', 'hide', 'iplStep3', '', 'hide', 'wpl', '', 'hide'); 
	}
	
	else if ( v == "ATC" )
	
	{
		MM_showHideLayers('atc_1', '', 'show', 'thankyou', '', 'hide', 'rmt', '', 'hide', 'oStep1', '', 'hide', 'contact_legal', '', 'hide', 'iplStep3', '', 'hide', 'wpl', '', 'hide', 'atc_yes', '', 'hide', 'atc_no', '', 'hide'); 
	}
	
	else if ( v == "RMT" )
	
	{
		MM_showHideLayers('rmt', '', 'show', 'thankyou', '', 'show', 'atc_1', '', 'hide', 'atc_yes', '', 'hide', 'atc_no', '', 'hide', 'oStep1', '', 'hide', 'contact_legal', '', 'hide', 'iplStep3', '', 'hide', 'wpl', '', 'hide'); 
	}
	
	else if ( v == "Other" )
	
	{
		MM_showHideLayers('rmt', '', 'hide', 'thankyou', '', 'hide', 'atc_1', '', 'hide', 'atc_yes', '', 'hide', 'atc_no', '', 'hide', 'oStep1', '', 'show'); 
	}
	
}
 
function clearRadios(radioname, v)
{
   for( i = 0; i < document.form1[radioname].length; i++ )
      
      document.form1[radioname][i].checked = false;
      
   if ( v=="Other" )
   
   	{
   		MM_showHideLayers('rmt', '', 'hide', 'thankyou', '', 'hide', 'atc_1', '', 'hide', 'atc_yes', '', 'hide', 'atc_no', '', 'hide', 'oStep1', '', 'show', 'iplStep3', '', 'hide'); 
	 	}
}
 
//-->
 
</script>
 
 
<div id="guide">
	
	<form action="#" method="post" enctype="application/x-www-form-urlencoded" name="form1">
		
		<div class="showMe" id="intro">
			<p>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>Will you be doing business with one of these vendors?</td>
				</tr>
				
				<tr>
					<td width="15">&nbsp;</td>
					<td>
						<br/>
						<select name="question1" id="question1" onchange="determineNext(this.value); clearRadios('myradio', this.value);">
						  <option value="">-- Choose a vendor --</option>
						  <option value="ATC">ATC</option> 
							<option value="RMT">RMT</option> 
							<option value="Other">IEI Barge</option> 
							<option value="Other">CRANDIC</option> 
							<option value="Other">Sheboygan Power, LLC</option> 
							<option value="Other">Wisconsin Power & Light</option> 
							<option value="Other">Interstate Power & Light</option> 
							<option value="Other">Williams Bulk Transfer</option> 
							<option value="No">No</option>
					</select>					
					</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
			</table>
		</div>
		
		<div class="hideMe" id="atc_1">
			<table width="100%"  border="0" cellspacing="0" cellpadding="2">
				<tr>
					<td width="15">2.</td>
					<td><a name="aStep2"></a>Total PO Value > $25K? </td>
				</tr>
				<tr>
					<td width="15">&nbsp;</td>
					<td><input name="myradio" id="myradio" type="radio" value="Yes" onClick="MM_showHideLayers('rmt', '', 'hide', 'atc_no', '', 'hide', 'atc_yes','','show', 'thankyou', '', 'show');"> Yes</td>
				</tr>
				<tr>
					<td width="15">&nbsp;</td>
					<td><input name="myradio" id="myradio" type="radio" value="No" onClick="MM_showHideLayers('rmt','','hide', 'atc_no','','show', 'atc_yes','','hide', 'thankyou','','show');"> No</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
			</table>
		</div>
		
		<div class="hideMe" id="oStep1">
			<table width="100%"  border="0" cellspacing="0" cellpadding="2">
				<tr>
					<td width="15">2.</td>
					<td><a name="o1"></a>Select the buying legal entity</td>
				</tr>
				<tr>
					<td width="15">&nbsp;</td>
					<td>
						<input name="myradio" id="myradio" type="radio" value="IPL" onClick="MM_showHideLayers('rmt','','hide', 'atc_no','','hide', 'atc_yes','','hide', 'thankyou','','hide', 'contact_legal', '', 'hide', 'wpl', '', 'hide', 'iplStep3', '', 'show');"> IPL<br/>
						
						<input name="myradio" id="myradio" type="radio" value="WPL" onClick="MM_showHideLayers('rmt','','hide', 'atc_no','','hide', 'atc_yes','','hide', 'thankyou','','show', 'contact_legal', '', 'hide', 'wpl', '', 'show', 'iplStep3', '', 'hide');"> WP & L or SERVCO<br/>
						
						<input name="myradio" id="myradio" type="radio" value="No" onClick="MM_showHideLayers('rmt','','hide', 'atc_no','','hide', 'atc_yes','','hide', 'thankyou','','show', 'contact_legal', '', 'show', 'wpl', '', 'hide', 'iplStep3', '', 'hide');"> No</td>					                                                                            					                                                                            					
				</tr>
				<tr>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
			</table>
		</div>
		
		<div class="hideMe" id="iplStep3">
			<table width="100%"  border="0" cellspacing="0" cellpadding="2">
				<tr>
					<td width="15">3.</td>
					<td><a name="aStep2"></a>Total PO Value < $50K?</td>
				</tr>
				<tr>
					<td width="15">&nbsp;</td>
					<td><input name="myradio" id="myradio" type="radio" value="Yes" onClick="MM_showHideLayers('rmt', '', 'hide', 'atc_no', '', 'show', 'atc_yes','','hide', 'thankyou', '', 'show');"> Yes</td></td>
				</tr>
				<tr>
					<td width="15">&nbsp;</td>
					<td><input name="myradio" id="myradio" type="radio" value="No" onClick="MM_showHideLayers('rmt','','hide', 'atc_no','','hide', 'atc_yes','','show', 'thankyou','','show');"> No</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
			</table>
		</div>
		
		<div id="answers">
		 <a name="aAnswers"></a>
			<div class="hideMe" id="rmt">
				<p class="answer">Answer:</p>
				<p class="answertext">Enter a PeopleSoft Requisition.</p>
			</div>
			<div class="hideMe" id="atc_yes">
				<p class="answer">Answer:</p>
				<p class="answertext">Enter a PeopleSoft Requisition.</p>
			</div>
			<div class="hideMe" id="atc_no">
				<p class="answer">Answer:</p>
				<p class="answertext">Nothing else required. Do the Deal.</p>
			</div>	
			<div class="hideMe" id="contact_legal">
				<p class="answer">Answer:</p>
				<p class="answertext">Contact Legal.</p>
			</div>
			<div class="hideMe" id="wpl">
				<p class="answer">Answer:</p>
				<p class="answertext">Enter a PeopleSoft Requisition</p>
			</div>	
			<div class="hideMe" id="thankyou">
				<p>&nbsp;</p>
				<p class="answer">Thank you for using Affiliate Interest Pro.</p>
				<p><input name="playagain" type="submit" value="Use the Affiliate Interest Pro again"></p>
			</div>
		</div>
	</form>
</div>
 
<!--$include html_page_bottom-->

Open in new window

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
>>Thank you for posting
No problem. I answer so many that it's hard to keep up with posters if they do not answer within the same hour (not day) I just move on and many times I don't see the responses.

 - I will 'Object' to my own auto-close
Off-topic. I would be intested to know what happens when you do that. A day or two ago I clicked on "Object" to some question and it had the side effect of being credited to my "Questions Asked". In other words, when I clicked Object, it posted a question on my behalf to community support. It pisses me off that it shows as a question because I did NOT ask any question. To me, a question is actually clicing on the "Ask A Question" button and go through all the steps to ask a question. In my opinion, objecting does NOT qualify as a question and it should NOT appear under my list of questions. It would be nice if it got deleted, since, after all, I did NOT ask any question. It's misleading. In case you are wondering which question was that, look at my list of questions. You can't miss it.