Page 1 of 1

chained selector based, javascript + css [SOLVED]

Posted: Thu Nov 10, 2005 4:18 pm
by J_Iceman05
I am trying to build a portion of a page where, depending on thier choice in a select box, certain other input boxes will appear.
if the choice is a type of credit card, then the appropriate boxes for credit card input will become visible.
otherwise different boxes will become visible.


it doesn't even seem to be referencing the select box to begin with, so please help me see why it isn't working.
I have also tried using "document.MemberInfo.paymentmethod" (instead of forms['MemberInfo'] and elements['paymentmethod'])

this is what i have...

Code: Select all

$selector = "if(document.forms['MemberInfo'].elements['paymentmethod'].options[whichSelected].value == '";
$YcreditV = "document.CC.visible = visible";
$YcreditI = "document.Ch.visible = hidden";
$YcreditT = "document.CC.top = 0";

$NcreditV = "document.Ch.visible = visible";
$NcreditI = "document.CC.visible = hidden";
$NcreditT = "document.CC.top = -15";

$function = "function updateMethods()\n";
$function .= "{\n";
$function .= "\t whichSelected = document.forms['MemberInfo'].elements['paymentmethod'].selectedIndex;\n";
$chainCount = 0;
while ($chainCount < $methNum) {
	if ($MethodType[$chainCount]['credit'] == 0) {
		$function .= "\t ".$selector.$MethodType[$chainCount]['id']."')\n";
		$function .= "\t {\n";
		$function .= "\t\t ".$NcreditV.";\n";
		$function .= "\t\t ".$NcreditI.";\n";
		$function .= "\t\t ".$NcreditT.";\n";
		$function .= "\t\t alert('check');\n";  // testing
		$function .= "\t }\n";
	}
	if ($MethodType[$chainCount]['credit'] == 1) {
		$function .= "\t ".$selector.$MethodType[$chainCount]['id']."')\n";
		$function .= "\t {\n";
		$function .= "\t\t ".$YcreditV.";\n";
		$function .= "\t\t ".$YcreditI.";\n";
		$function .= "\t\t ".$YcreditT.";\n";
		$function .= "\t\t alert('CC');\n"; // testing
		$function .= "\t }\n";
	}
	$chainCount ++;
}
$function .= "\t return true;\n";
$function .= "}\n";
It prints out between javascript tags.

Code: Select all

<script type="text/javascript" language="JavaScript">
function updateMethods()
{
	 whichSelected = document.forms['MemberInfo'].elements['paymentmethod'].selectedIndex;
	 if(document.forms['MemberInfo'].elements['paymentmethod'].options[whichSelected].value == '1')
	 {
		 document.Ch.visible = visible;
		 document.CC.visible = hidden;
		 document.CC.top = -15;
		 alert('check');
	 }
	 if(document.forms['MemberInfo'].elements['paymentmethod'].options[whichSelected].value == '2')
	 {
		 document.CC.visible = visible;
		 document.Ch.visible = hidden;
		 document.CC.top = 0;
		 document.forms['MemberInfo'].elements['cclf'].value = 'hello';
		 alert('CC');
	 }
	 if(document.forms['MemberInfo'].elements['paymentmethod'].options[whichSelected].value == '3')
	 {
		 document.CC.visible = visible;
		 document.Ch.visible = hidden;
		 document.CC.top = 0;
		 document.forms['MemberInfo'].elements['cclf'].value = 'hello';
		 alert('CC');
	 }
	 if(document.forms['MemberInfo'].elements['paymentmethod'].options[whichSelected].value == '4')
	 {
		 document.CC.visible = visible;
		 document.Ch.visible = hidden;
		 document.CC.top = 0;
		 document.forms['MemberInfo'].elements['cclf'].value = 'hello';
		 alert('CC');
	 }
	 if(document.forms['MemberInfo'].elements['paymentmethod'].options[whichSelected].value == '6')
	 {
		 document.Ch.visible = visible;
		 document.CC.visible = hidden;
		 document.CC.top = -15;
		 alert('check');
	 }
	 if(document.forms['MemberInfo'].elements['paymentmethod'].options[whichSelected].value == '7')
	 {
		 document.Ch.visible = visible;
		 document.CC.visible = hidden;
		 document.CC.top = -15;
		 alert('check');
	 }
	 if(document.forms['MemberInfo'].elements['paymentmethod'].options[whichSelected].value == '8')
	 {
		 document.Ch.visible = visible;
		 document.CC.visible = hidden;
		 document.CC.top = -15;
		 alert('check');
	 }
	 if(document.forms['MemberInfo'].elements['paymentmethod'].options[whichSelected].value == '9')
	 {
		 document.Ch.visible = visible;
		 document.CC.visible = hidden;
		 document.CC.top = -15;
		 alert('check');
	 }
	 return true;
}
</script>
the css and the input boxes portion of code...

Code: Select all

<style>
	#CC {visibility:hidden; top:-15; display:inline;}
	#Ch {visibility:hidden; display:inline;}
</style>


<form name="MemberInfo" method="post" action="processing.php">
<table>
	<tr>
		<td>
			Year
		</td>
		<td>
			BillAmt
		</td>
		<td>
			PaymentDate
		</td>
		<td>
			PaymentAmount
		</td>
		<td>
			CCLF
		</td>
		<td>
			PaymentMethod
		</td>
		<td>
			Check #
		</td>
	</tr>
	<tr>
		<td>
			<input name="year" type="text" size="4" maxlength="6" onFocus="if (this.value == '') {this.value = '<? echo date('Y');?>';}">
		</td>
		<td>
			<input name="billamt" type="text" size="8">
		</td>
		<td>
			<input name="paymentdate" type="text" size="10" onFocus="if (this.value == '') {this.value = '<? echo date('m/d/Y');?>';}">
		</td>
		<td>
			<input name="paymentamount" type="text" size="11">
		</td>
		<td>
			<input name="cclf" type="text" size="5" maxlength="6">
		</td>
		<td>
			<select name="paymentmethod" onChange="updateMethods();">
			<?
				$methcount = 0;
				while ($methcount < $methNum){
					echo "\t\t\t<option value=\"" . $MethodType[$methcount]['id'] . "\">" . $MethodType[$methcount]['name'] . "</option>\n";
					$methcount ++;
				}
			?>
			</select>
		</td>
		<td>
			<div id="Ch">
				<input name="check" type="text" size="6">
			</div>
		</td>
	</tr>
	<tr>
		<td colspan="7">
			<div id="CC">
				<table>
					<tr>
						<td>
							CreditCardNumber
						</td>
						<td>
							CardholdersName
						</td>
						<td>
							CreditCardExpDate
						</td>
					</tr>
					<tr>
						<td>
							<input name="creditcardnumber" type="text">
						</td>
						<td>
							<input name="cardholdersname" type="text">
						</td>
						<td>
							<input name="creditcardexpdate" type="text">
						</td>
					</tr>
				</table>
			</div>
		</td>
	</tr>
</table>
<intput name="submit" type="submit>
</form>
Thank you for your help.

Posted: Thu Nov 10, 2005 4:29 pm
by feyd
  1. there's no constant called visible or hidden, you need to send the string 'visible' or 'hidden' ;)
  2. document.Ch.visible is wrong.

    Code: Select all

    var o = document.getElementById('CC');
    if(o) {
      o.style.top = '-15px';
      o.style.visibility = 'visible';
    }
    o = document.getElementById('Ch');
    if(o) {
      o.style.visibility = 'hidden';
    }

Posted: Thu Nov 10, 2005 4:56 pm
by J_Iceman05
Thank you very much. It works great now.