Solved

PHP/Javascript - On selection of radio button display new form feilds

Posted on 2008-10-14
5
2,754 Views
Last Modified: 2008-10-22
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
Comment
Question by:celnelson
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 4

Accepted Solution

by:
Lordgobbledegook earned 250 total points
ID: 22718393
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
 
LVL 17

Expert Comment

by:HuyBD
ID: 22718416
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
 
LVL 17

Assisted Solution

by:HuyBD
HuyBD earned 250 total points
ID: 22718464
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
 

Author Comment

by:celnelson
ID: 22721570
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
 

Author Comment

by:celnelson
ID: 22776056
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Part of the Global Positioning System A geocode (https://developers.google.com/maps/documentation/geocoding/) is the major subset of a GPS coordinate (http://en.wikipedia.org/wiki/Global_Positioning_System), the other parts being the altitude and t…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to count occurrences of each item in an array.

623 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question