Solved

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

Posted on 2008-10-14
5
2,747 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
  • 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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

707 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now