celnelson
asked on
PHP/Javascript - On selection of radio button display new form feilds
I need the code to accomplish the following-
When a user selects the Radio Button Credit Card
appropriate fields are then displayed
When a user selects the Radio Button Check
appropriate fields are displayed
The credit card and check fields should toggle back and forth as the user selects different options - Please help.
When a user selects the Radio Button Credit Card
appropriate fields are then displayed
When a user selects the Radio Button Check
appropriate fields are displayed
The credit card and check fields should toggle back and forth as the user selects different options - Please help.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Well-
That almost worked -
Here is the code-
Basically -
When Credit Card is Selected - it should show credit card info -
and when Check is selected it should show check info-
Ideally there would be a 3rd state - select - which would be the default state and would show nothing.
Basically what is happening now - is in IE - creditcard is selected as default and you can toggle to check and that works - but you can't toggle back to credit card.
In IE all info is displayed for both credit and check - if you select check - credit goes away - you can toggle back - but then both are dispalyed.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>American Home Services Store : Your guide to saving on all of your everyday product and services needs.</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="view.css" media="all">
<script type="text/javascript" src="view.js"></script>
<script type="text/javascript" src="calendar.js"></script
<script language="javascript">
function ShowCreditCard() {
if (document.getElementById("
document.getElementById("c
}
else {
document.getElementById("c
}
}
</script>
</head>
<body>
<div id="logo_banner">
<div class="logo"></div>
<div class="login_area"><div class=login_textbox1><b>Yo
<div class="member_area">
<div class="member_head">Not a Member</div>
<div class="member_text"><a href="register.php" class="member_link">Regist
</div>
</div>
<div id="menustrip">
<div class="search">
</div> <div class="menu_bg"><div style="float: right; padding-right: 50px;"><a href="index.php" class="button1">Home</a> <a href="categories.php" class="button">Categories<
<div id="middle">
<div id="innerblank">
<div id="innerleftblank">
<h1>Register</h1>
<div class="text">
<div style="font-size: 16px; padding: 5px; color: #990000;">
<?php if ($registermsg!="") print $registermsg; ?><br>
</div>
<form name="s" action="register.php" method="POST">
<?php registeruser("CLIENT",365,
<h2>User Details</h2>
<table><tr><td colspan=4>
<input id="email" name="email" class="element text medium" type="text" maxlength="255" value="<?php echo $email; ?>"/> </td></tr>
<tr><td colspan=4>
<label>Email</label></td><
<tr><td colspan=4>
<input id="username" name="username" class="element text medium" type="text" maxlength="255" value="<?php echo $username; ?>"/>
</td></tr>
<tr><td colspan=4>
<label>Username</label>
</td></tr>
<tr><td colspan=4><label class="description" for="element_1">Name </label></td></tr>
<tr><td colspan=2>
<input id="name" name="name" class="element text" maxlength="255" size="30" value="<?php echo $name; ?>"/><br>
<label>First</label>
</td><td colspan=2>
<input id="lastname" name= "custom1" class="element text" maxlength="255" size="30" value="<?php echo $custom1; ?>"/><br>
<label>Last</label></td></
<tr><td colspan=4>
<label class="description" for="element_2">Address </label>
</td></tr>
<tr><td colspan=4>
<input id="streetaddress" name="custom2" class="element text large" value="<?php echo $custom2; ?>" type="text" style="width: 400px;"></td></tr><tr><td colspan=4>
<label for="element_2_1">Street Address</label>
</td></tr><tr><td colspan=4>
<input id="streetaddress2" name="custom3" class="element text large" value="<?php echo $custom3; ?>" type="text" style="width: 400px;">
</td></tr>
<tr><td colspan=4>
<label for="element_2_2">Address Line 2</label>
</td></tr>
<tr><td colspan=2>
<div class="left">
<input id="city" name="custom4" class="element text medium" value="<?php echo $custom4; ?>" type="text" style="width: 200px;"><br>
<label for="element_2_3">City</la
</td><td colspan=2>
<input id="state" name="custom5" class="element text medium" value="<?php echo $custom5; ?>" type="text" style="width: 50px;">
<label for="element_2_4">State</l
</td></tr>
<tr><td colspan=2>
<input id="zip" name="custom6" class="element text medium" maxlength="15" value="<?php echo $custom6; ?>" style="width: 70px;" type="text"><br>
<label for="element_2_5">Zip</lab
</td><td colspan=2></td></tr>
<tr><td colspan=2>
<input id="homephone" name="custom7" class="element text" maxlength="255" size="30" value="<?php echo $custom7; ?>"/><br>
<label>Home Phone</label>
</td><td colspan=2>
<input id="cellphone" name= "custom8" class="element text" maxlength="255" size="30" value="<?php echo $custom8; ?>"/><br>
<label>Cell Phone</label>
</td></tr>
<tr><td colspan=2>
<input id="birthdate" name="custom9" class="element text" size="20" maxlength="10" value="<?php echo $custom9; ?>" type="text"><br>
<label for="element_5_1">Birth Date</label>
</td><td colspn=2></td></tr></table
<h2>Payment Details</h2>
<label class="description" for="">Payment Type </label>
<select name="paymenttype" id="paymenttype" onChange="ShowCreditCard()
<option style="width: 150px;">Select</option>
<option style="width: 150px;">Credit Card</option>
<option style="width: 150px;">Check</option>
</select>
<table id="creditcard" style="display: none;">
<tr><td colspan=4>
<h3>Credit Card Information</h3>
</td></tr>
<tr><td colspan=4>
<label class="description" for="element_8">Name on Credit Card </label>
</td></tr>
<tr><td colspan=4>
<input id="cc-name" name="custom10" class="element text medium" type="text" maxlength="255" value="<?php echo $custom10; ?>"/>
</td></tr>
<tr><td colspan=4>
<label class="description" for="element_9">Address </label>
</td></tr>
<tr><td colspan=4>
<input id="cc-address" name="custom11" class="element text large" value="<?php echo $custom11; ?>" type="text" style="width: 400px;"><br>
<label for="element_9_1">Street Address</label>
</td></tr>
<tr><td colspan=4>
<input id="cc-address2" name="custom12" class="element text large" value="<?php echo $custom12; ?>" type="text" style="width: 400px;"><br>
<label for="element_9_2">Address Line 2</label>
</td></tr>
<tr><td colspan=2>
<div class="left">
<input id="cc-city" name="custom13" class="element text medium" value="<?php echo $custom13; ?>" type="text"><br>
<label for="element_9_3">City</la
</td><td colspan=2>
<input id="cc-state" name="custom14" class="element text medium" value="<?php echo $custom14; ?>" type="text" style="width: 40px;"><br>
<label for="element_9_4">State</l
</td></tr>
<tr><td colspan=2>
<input id="cc-zip" name="custom15" class="element text medium" maxlength="15" value="<?php echo $custom15; ?>" type="text" style="width: 60px;"><br>
<label for="element_9_5">Zip</lab
</td><td colspan=2></td></tr>
<tr><td colspan=4>
<label class="description" for="element_20">Card Type</label>
</td></tr>
<tr><td><input id="cc-visa" name="custom16" class="element radio" type="radio" value="Visa" />
<label class="choice" for="element_20_1">Visa</l
<td>
<input id="cc-mc" name="custom16" class="element radio" type="radio" value="Master Card" />
<label class="choice" for="element_20_2">Master Card</label></td>
<td>
<input id="cc-discover" name="custom16" class="element radio" type="radio" value="Discover" />
<label class="choice" for="element_20_3">Discove
<td>
<input id="cc-amex" name="custom16" class="element radio" type="radio" value="American Express" />
<label class="choice" for="element_20_4">America
</tr>
<tr><td colspan=4>
<input id="cc-number" name="custom17" class="element text medium" type="text" maxlength="255" value="<?php echo $custom17; ?>" style="width: 400px;"/> <br>
<label for="element_9_4">Card Number</label>
</td></tr>
<tr><td colspan=2>
<input id="cc-exp" name="custom18" class="element text medium" type="text" maxlength="255" value="<?php echo $custom18; ?>" style="width: 100px;"/><br>
<label for="element_9_4">Expirati
</td><td colsapn=2>
<input id="cc-verification" name="custom19" class="element text medium" type="text" maxlength="255" value="<?php echo $custom19; ?>" style="width: 100px;" /> <br>
<label for="element_9_4">Verifica
</td></tr></table>
<table id="check" style="display: none;">
<tr><td>
<h3>Checking Account Information</h3>
</td></tr>
<tr><td>
<label class="description" for="element_13">Name on Checking Account </label>
</td></tr>
<tr><td>
<input id="check-name" name="custom20" class="element text medium" type="text" maxlength="255" value="<?php echo $custom20; ?>"/>
</td></tr>
<tr><td>
<label class="description" for="element_14">Routing Number </label>
</td></tr>
<tr><td>
<input id="check-routing" name="custom21" class="element text medium" type="text" maxlength="255" value="<?php echo $custom21; </td></tr>
<tr><td>
<label class="description" for="element_15">Account Number </label>
</td></tr>
<tr><td>
<input id="check-acctnum" name="custom22" class="element text medium" type="text" maxlength="255" value="<?php echo $custom22; ?>"/>
</td></tr>
</table>
<table><tr><td>
<input id="terms" name="custom23" class="element checkbox" type="checkbox" value="1" onClick="checkDummy()" />
</td>
<td>
<label class="description" for="element_21" style="line-height: 30px;">I have read and agree to the <a href="terms.php" target="_new">terms and conditions</a> of the AHSS Membership Plan. </label>
</td></tr>
<tr><td colspan=2>
<input type="submit" name="Button1" value="Register">
</td></tr></table>
</form>
</div>
</div>
<div id="innerrightblank"> <div class="news">
<div class="news_head">Join Today</div>
<div class="news_textarea">
<div class="news_head1">
Become a member, start saving money, and have fun shopping for our wide array of products and services. The membership costs $19.95 a month and can be billed to your credit card or bank account every month. There are no contracts, and you can cancel at anytime. If you would like to purchase a "LIFETIME" membership you can pay a 1 time membership fee of $99.95. With the "LIFETIME" membership, you will be billed 1 time and have access to our site forever, there will be NO monthly charges on your account.<br><br>
<center><a href="register.html"><img src="images/join.jpg" ></a><br>
</center><br>
<i>
***For signing up you will also receive a $100.00 Wal-Mart Gift Card, after you complete just (2) purchases from our site from any store***</i>
<div style="height: 250px;"></div>
</div>
</div>
</div>
</div>
</div>
That almost worked -
Here is the code-
Basically -
When Credit Card is Selected - it should show credit card info -
and when Check is selected it should show check info-
Ideally there would be a 3rd state - select - which would be the default state and would show nothing.
Basically what is happening now - is in IE - creditcard is selected as default and you can toggle to check and that works - but you can't toggle back to credit card.
In IE all info is displayed for both credit and check - if you select check - credit goes away - you can toggle back - but then both are dispalyed.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>American Home Services Store : Your guide to saving on all of your everyday product and services needs.</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="view.css" media="all">
<script type="text/javascript" src="view.js"></script>
<script type="text/javascript" src="calendar.js"></script
<script language="javascript">
function ShowCreditCard() {
if (document.getElementById("
document.getElementById("c
}
else {
document.getElementById("c
}
}
</script>
</head>
<body>
<div id="logo_banner">
<div class="logo"></div>
<div class="login_area"><div class=login_textbox1><b>Yo
<div class="member_area">
<div class="member_head">Not a Member</div>
<div class="member_text"><a href="register.php" class="member_link">Regist
</div>
</div>
<div id="menustrip">
<div class="search">
</div> <div class="menu_bg"><div style="float: right; padding-right: 50px;"><a href="index.php" class="button1">Home</a> <a href="categories.php" class="button">Categories<
<div id="middle">
<div id="innerblank">
<div id="innerleftblank">
<h1>Register</h1>
<div class="text">
<div style="font-size: 16px; padding: 5px; color: #990000;">
<?php if ($registermsg!="") print $registermsg; ?><br>
</div>
<form name="s" action="register.php" method="POST">
<?php registeruser("CLIENT",365,
<h2>User Details</h2>
<table><tr><td colspan=4>
<input id="email" name="email" class="element text medium" type="text" maxlength="255" value="<?php echo $email; ?>"/> </td></tr>
<tr><td colspan=4>
<label>Email</label></td><
<tr><td colspan=4>
<input id="username" name="username" class="element text medium" type="text" maxlength="255" value="<?php echo $username; ?>"/>
</td></tr>
<tr><td colspan=4>
<label>Username</label>
</td></tr>
<tr><td colspan=4><label class="description" for="element_1">Name </label></td></tr>
<tr><td colspan=2>
<input id="name" name="name" class="element text" maxlength="255" size="30" value="<?php echo $name; ?>"/><br>
<label>First</label>
</td><td colspan=2>
<input id="lastname" name= "custom1" class="element text" maxlength="255" size="30" value="<?php echo $custom1; ?>"/><br>
<label>Last</label></td></
<tr><td colspan=4>
<label class="description" for="element_2">Address </label>
</td></tr>
<tr><td colspan=4>
<input id="streetaddress" name="custom2" class="element text large" value="<?php echo $custom2; ?>" type="text" style="width: 400px;"></td></tr><tr><td colspan=4>
<label for="element_2_1">Street Address</label>
</td></tr><tr><td colspan=4>
<input id="streetaddress2" name="custom3" class="element text large" value="<?php echo $custom3; ?>" type="text" style="width: 400px;">
</td></tr>
<tr><td colspan=4>
<label for="element_2_2">Address Line 2</label>
</td></tr>
<tr><td colspan=2>
<div class="left">
<input id="city" name="custom4" class="element text medium" value="<?php echo $custom4; ?>" type="text" style="width: 200px;"><br>
<label for="element_2_3">City</la
</td><td colspan=2>
<input id="state" name="custom5" class="element text medium" value="<?php echo $custom5; ?>" type="text" style="width: 50px;">
<label for="element_2_4">State</l
</td></tr>
<tr><td colspan=2>
<input id="zip" name="custom6" class="element text medium" maxlength="15" value="<?php echo $custom6; ?>" style="width: 70px;" type="text"><br>
<label for="element_2_5">Zip</lab
</td><td colspan=2></td></tr>
<tr><td colspan=2>
<input id="homephone" name="custom7" class="element text" maxlength="255" size="30" value="<?php echo $custom7; ?>"/><br>
<label>Home Phone</label>
</td><td colspan=2>
<input id="cellphone" name= "custom8" class="element text" maxlength="255" size="30" value="<?php echo $custom8; ?>"/><br>
<label>Cell Phone</label>
</td></tr>
<tr><td colspan=2>
<input id="birthdate" name="custom9" class="element text" size="20" maxlength="10" value="<?php echo $custom9; ?>" type="text"><br>
<label for="element_5_1">Birth Date</label>
</td><td colspn=2></td></tr></table
<h2>Payment Details</h2>
<label class="description" for="">Payment Type </label>
<select name="paymenttype" id="paymenttype" onChange="ShowCreditCard()
<option style="width: 150px;">Select</option>
<option style="width: 150px;">Credit Card</option>
<option style="width: 150px;">Check</option>
</select>
<table id="creditcard" style="display: none;">
<tr><td colspan=4>
<h3>Credit Card Information</h3>
</td></tr>
<tr><td colspan=4>
<label class="description" for="element_8">Name on Credit Card </label>
</td></tr>
<tr><td colspan=4>
<input id="cc-name" name="custom10" class="element text medium" type="text" maxlength="255" value="<?php echo $custom10; ?>"/>
</td></tr>
<tr><td colspan=4>
<label class="description" for="element_9">Address </label>
</td></tr>
<tr><td colspan=4>
<input id="cc-address" name="custom11" class="element text large" value="<?php echo $custom11; ?>" type="text" style="width: 400px;"><br>
<label for="element_9_1">Street Address</label>
</td></tr>
<tr><td colspan=4>
<input id="cc-address2" name="custom12" class="element text large" value="<?php echo $custom12; ?>" type="text" style="width: 400px;"><br>
<label for="element_9_2">Address Line 2</label>
</td></tr>
<tr><td colspan=2>
<div class="left">
<input id="cc-city" name="custom13" class="element text medium" value="<?php echo $custom13; ?>" type="text"><br>
<label for="element_9_3">City</la
</td><td colspan=2>
<input id="cc-state" name="custom14" class="element text medium" value="<?php echo $custom14; ?>" type="text" style="width: 40px;"><br>
<label for="element_9_4">State</l
</td></tr>
<tr><td colspan=2>
<input id="cc-zip" name="custom15" class="element text medium" maxlength="15" value="<?php echo $custom15; ?>" type="text" style="width: 60px;"><br>
<label for="element_9_5">Zip</lab
</td><td colspan=2></td></tr>
<tr><td colspan=4>
<label class="description" for="element_20">Card Type</label>
</td></tr>
<tr><td><input id="cc-visa" name="custom16" class="element radio" type="radio" value="Visa" />
<label class="choice" for="element_20_1">Visa</l
<td>
<input id="cc-mc" name="custom16" class="element radio" type="radio" value="Master Card" />
<label class="choice" for="element_20_2">Master Card</label></td>
<td>
<input id="cc-discover" name="custom16" class="element radio" type="radio" value="Discover" />
<label class="choice" for="element_20_3">Discove
<td>
<input id="cc-amex" name="custom16" class="element radio" type="radio" value="American Express" />
<label class="choice" for="element_20_4">America
</tr>
<tr><td colspan=4>
<input id="cc-number" name="custom17" class="element text medium" type="text" maxlength="255" value="<?php echo $custom17; ?>" style="width: 400px;"/> <br>
<label for="element_9_4">Card Number</label>
</td></tr>
<tr><td colspan=2>
<input id="cc-exp" name="custom18" class="element text medium" type="text" maxlength="255" value="<?php echo $custom18; ?>" style="width: 100px;"/><br>
<label for="element_9_4">Expirati
</td><td colsapn=2>
<input id="cc-verification" name="custom19" class="element text medium" type="text" maxlength="255" value="<?php echo $custom19; ?>" style="width: 100px;" /> <br>
<label for="element_9_4">Verifica
</td></tr></table>
<table id="check" style="display: none;">
<tr><td>
<h3>Checking Account Information</h3>
</td></tr>
<tr><td>
<label class="description" for="element_13">Name on Checking Account </label>
</td></tr>
<tr><td>
<input id="check-name" name="custom20" class="element text medium" type="text" maxlength="255" value="<?php echo $custom20; ?>"/>
</td></tr>
<tr><td>
<label class="description" for="element_14">Routing Number </label>
</td></tr>
<tr><td>
<input id="check-routing" name="custom21" class="element text medium" type="text" maxlength="255" value="<?php echo $custom21; </td></tr>
<tr><td>
<label class="description" for="element_15">Account Number </label>
</td></tr>
<tr><td>
<input id="check-acctnum" name="custom22" class="element text medium" type="text" maxlength="255" value="<?php echo $custom22; ?>"/>
</td></tr>
</table>
<table><tr><td>
<input id="terms" name="custom23" class="element checkbox" type="checkbox" value="1" onClick="checkDummy()" />
</td>
<td>
<label class="description" for="element_21" style="line-height: 30px;">I have read and agree to the <a href="terms.php" target="_new">terms and conditions</a> of the AHSS Membership Plan. </label>
</td></tr>
<tr><td colspan=2>
<input type="submit" name="Button1" value="Register">
</td></tr></table>
</form>
</div>
</div>
<div id="innerrightblank"> <div class="news">
<div class="news_head">Join Today</div>
<div class="news_textarea">
<div class="news_head1">
Become a member, start saving money, and have fun shopping for our wide array of products and services. The membership costs $19.95 a month and can be billed to your credit card or bank account every month. There are no contracts, and you can cancel at anytime. If you would like to purchase a "LIFETIME" membership you can pay a 1 time membership fee of $99.95. With the "LIFETIME" membership, you will be billed 1 time and have access to our site forever, there will be NO monthly charges on your account.<br><br>
<center><a href="register.html"><img src="images/join.jpg" ></a><br>
</center><br>
<i>
***For signing up you will also receive a $100.00 Wal-Mart Gift Card, after you complete just (2) purchases from our site from any store***</i>
<div style="height: 250px;"></div>
</div>
</div>
</div>
</div>
</div>
ASKER
Ultimately this is what worked-
<script language="javascript" type="text/javascript">
function ShowCreditCard() {
if
(document.getElementById("
document.getElementById("c
document.getElementById("c
}
else if (document.getElementById("
document.getElementById("c
document.getElementById("c
}
else if (document.getElementById("
document.getElementById("s
document.getElementById("c
document.getElementById("c
}
}
</script>
<--body-->
<label class="description" for="">Payment Type </label>
<select name="paymenttype" id="paymenttype" onChange="ShowCreditCard()
<option selected value="Select" style="width: 150px;" >Select</option>
<option value="Credit Card" style="width: 150px;">Credit Card</option>
<option value="Check" style="width: 150px;">Check</option>
</select>
<div id="select" style="display: none;">
</div>
<div id="creditcard" style="display: none;">
</div>
<div id="check" style="display: none;">
</div>
IE shows an error when I toggle back to select, but it seems to work in all browsers and toggle as desired.
<script language="javascript" type="text/javascript">
function ShowCreditCard() {
if
(document.getElementById("
document.getElementById("c
document.getElementById("c
}
else if (document.getElementById("
document.getElementById("c
document.getElementById("c
}
else if (document.getElementById("
document.getElementById("s
document.getElementById("c
document.getElementById("c
}
}
</script>
<--body-->
<label class="description" for="">Payment Type </label>
<select name="paymenttype" id="paymenttype" onChange="ShowCreditCard()
<option selected value="Select" style="width: 150px;" >Select</option>
<option value="Credit Card" style="width: 150px;">Credit Card</option>
<option value="Check" style="width: 150px;">Check</option>
</select>
<div id="select" style="display: none;">
</div>
<div id="creditcard" style="display: none;">
</div>
<div id="check" style="display: none;">
</div>
IE shows an error when I toggle back to select, but it seems to work in all browsers and toggle as desired.
e.g
Open in new window