chained selector based, javascript + css [SOLVED]

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
J_Iceman05
Forum Commoner
Posts: 72
Joined: Wed Aug 03, 2005 10:52 am
Location: Las Vegas, NV

chained selector based, javascript + css [SOLVED]

Post 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.
Last edited by J_Iceman05 on Thu Nov 10, 2005 5:02 pm, edited 1 time in total.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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';
    }
User avatar
J_Iceman05
Forum Commoner
Posts: 72
Joined: Wed Aug 03, 2005 10:52 am
Location: Las Vegas, NV

Post by J_Iceman05 »

Thank you very much. It works great now.
Post Reply