Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2758
  • Last Modified:

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.
0
celnelson
Asked:
celnelson
  • 2
  • 2
2 Solutions
 
LordgobbledegookCommented:
Something like this... you can replace the table with a <div> instead.  As long as the id matches what is in the Javascript.
<script language="javascript"> 
function ShowCreditCard() {
	if (document.getElementById("paymenttype").value == "Credit Card") {
		document.getElementById("creditcard").style.display = "block";
	}
	else {
		document.getElementById("creditcard").style.display = "none";
	}
}
</script>
 
 
<p>Please select your method of payment.</p>
 
 
<p>Payment Type
<select name="paymenttype" id="paymenttype" onChange="ShowCreditCard()">';
<option>Credit Card</option>
<option>Direct Deposit</option>
</select></p>
 
 
<table id="creditcard">
<tr><td>Credit Card No.</td>
<td><input type="text" name="creditcardnumber" maxlength="20" /></td></tr>
 
<tr><td>Expiry Date</td>
<td>
<select name="expirymonth">
<option>01</option>
<option>02</option>
<option>etc</option>
</select>
 
<select name="expiryyear">
<option>2008</option>
<option>2009</option>
<option>2010</option>
<option>etc</option>
</select>
</td></tr>
 
</table>

Open in new window

0
 
HuyBDCommented:
you should use div tag to display the form
e.g
<div class="main">
	<div id="form1">
.............
	</div>
	<div id="form2">
...........
	</div>
	<div id="form3">
..........
	</div>
</div>

Open in new window

0
 
HuyBDCommented:
here is example
<html>
<head>
<style>
.main {
	border: 1px solid #919B9C;
	border-top: 0px;
	padding: 10px;
	padding-top: 5px;
	clear: both;
	background-color: white;
}
</style>
<script>
function clk(e)
{
	document.all.form1.style.display='none';
	document.all.form2.style.display='none';
	document.all.form3.style.display='none';
	if(e.value==0)
		document.all.form1.style.display='block';
	if(e.value==1)
		document.all.form2.style.display='block';
	if(e.value==2)
		document.all.form3.style.display='block';
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
 
<body>
<input type="radio" name="click" value="0" onclick="clk(this);" />
<input type="radio" name="click" value="1" onclick="clk(this);" />
<input type="radio" name="click" value="2" onclick="clk(this);" />
<div class="main">
        <div id="form1" style="display:none">
.............form 1 here
        </div>
        <div id="form2"  style="display:none">
.............form 2 here
        </div>
        <div id="form3"  style="display:none">
.............form 3 here
        </div>
</div>
</body>
</html>

Open in new window

0
 
celnelsonAuthor Commented:
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("paymenttype").value == "Credit Card") {
                document.getElementById("creditcard").style.display = "block";
        }
        else {
                document.getElementById("creditcard").style.display = "none";
        }
         
}
</script>





 

</head>

<body>

  <div id="logo_banner">
    <div class="logo"></div>
<div class="login_area"><div class=login_textbox1><b>Your 1 Stop Shop For All Your<br>Everyday Products & Services</b></div>
    <div class="member_area">
      <div class="member_head">Not a Member</div>
      <div class="member_text"><a href="register.php" class="member_link">Register Now.</a></div>
    </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</a><a href="register.php" class="button">Register</a><a href="contact.php" class="button">Contact</a> </div></div>

 
  <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,"registerthanks.php","newuser.htm","newuseradmin.htm","Yes","YNYYYY"); ?>
                  
                  <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>
            <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>
            
            <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</label>
            </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</label>
      </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</label>
            </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</label>
            </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</label>
            </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</label>
</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</label></td>

<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">Discover</label></td>
<td>
<input id="cc-amex" name="custom16" class="element radio" type="radio" value="American Express" />
<label class="choice" for="element_20_4">American Express</label></td>

            </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">Expiration Date</label>
      </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">Verification Code</label>
</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>
0
 
celnelsonAuthor Commented:
Ultimately this is what worked-

<script language="javascript" type="text/javascript">
function ShowCreditCard() {
       
        if
        (document.getElementById("paymenttype").value == "Credit Card") {
                    document.getElementById("creditcard").style.display = "block";
                document.getElementById("check").style.display = "none";
        }
     
        else if (document.getElementById("paymenttype").value == "Check") {
                document.getElementById("creditcard").style.display = "none";
                document.getElementById("check").style.display = "block";
        }
        else if (document.getElementById("paymenttype").style.display = "Select") {
                document.getElementById("select").style.display = "block";
                document.getElementById("creditcard").style.display = "none";
                document.getElementById("check").style.display = "none";
        }
 
         
}
 

</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.  
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now