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
itortuAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

itortuAuthor Commented:
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.
0
hieloCommented:
>>mysql_select_db($database_seadb);
did you mean mysqli_select_db?
0
hieloCommented:
my apologies. Wrong post :(
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

itortuAuthor Commented:
I am sorry I am not following you.
0
itortuAuthor Commented:
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

0
hieloCommented:
first of all, you need a new function that will clear any radio group you specify:
function clearRadio( formObj, radioName ){
      for( var i=0, limit=formObj[radioName].length; i < limit; ++i)
      {
            formObj[radioName][i].checked=false;
      }
}

if you use that function, you will NOT need the clearRadio1() and clearRadio2() functions. THEN within:

else if ( v=="Other" )      
{
....
}

you need to clear the radio groups you wish to clear and also hide question 3.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
hieloCommented:
>>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.
0
itortuAuthor Commented:
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.