Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2008-10-14
5
Medium Priority
?
2,756 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 750 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 750 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

Industry Leaders: 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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
There are times when I have encountered the need to decompress a response from a PHP request. This is how it's done, but you must have control of the request and you can set the Accept-Encoding header.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

715 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