chained selector based, javascript + css [SOLVED]
Posted: Thu Nov 10, 2005 4:18 pm
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...
It prints out between javascript tags.
the css and the input boxes portion of code...
Thank you for your help.
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";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>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>