www.webdeveloper.com
Results 1 to 2 of 2

Thread: Text box to appear only when radio button selected

  1. #1
    Join Date
    Sep 2012
    Posts
    5

    Text box to appear only when radio button selected

    I am currently running the Javascript code below to show a text box if the "PayPal" radio button is checked. It's working fine, but I only want the text box to appear if "PayPal" is checked. Currently the script defaults to show the text box on page load. In addition, if the form is submitted, and it doesn't pass validation, the text box will appear even when the "Check" radio button is checked. Also, I'm running a bit of PHP to hold the values after the form is submitted for validation. Don't know much about Javascript, but assume it's a fairly easy fix. Any help would be much appreciated!


    Code:
    function toggle(value){
    if(value=='show')
     document.getElementById('mytext').style.visibility='visible';
    else
     document.getElementById('mytext').style.visibility='hidden';
    }
    HTML Code:
    <div class="FormGroup">
      <h2 class="description">How would you like to be paid?</h2>
      <input id="Check" name="field_Payment" type="radio" value="Check" class="required" onclick="toggle('hide');" <?php if(isset($_POST['field_Payment']) && ($_POST['field_Payment']) == "Check") {echo 'checked';} ?>/><label class="choice">Check</label><br />
      <input id="Paypal" name="field_Payment" type="radio" value="PayPal" class="required" onclick="toggle('show');" <?php if(isset($_POST['field_Payment']) && ($_POST['field_Payment']) == "PayPal") {echo 'checked';} ?>/><label class="choice">PayPal</label><br />                                            
      <label for="field_Payment" class="error" > Required</label>
      <div class="red"><?php echo $errors[10]; ?></div>  
    </div>
    
    <div class="FormGroup" id="mytext">
      <h2 class="description">PayPal Email Address</h2>
      <div class="explanation">If PayPal email address is different from above, please specify here:</div>                                                
        <input type="text" name="paypal_address" id="mytext" >
    </div>

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,351

    Lightbulb

    I don't know much about PHP, but this should fix the JS portion of your code.
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <meta charset="utf-8" />
    <title> Untitled </title>
    <script type="text/javascript">
    function toggle(value){
      if(value=='show') { document.getElementById('mytext').style.display='block'; }
                   else { document.getElementById('mytext').style.display='none'; }
    }
    </script>
    
    <style type="text/css">
    
    </style>
    </head>
    <body>
    <div class="FormGroup">
      <h2 class="description">How would you like to be paid?</h2>
      <label class="choice">
       <input id="Check" name="field_Payment" type="radio" value="Check" class="required" onclick="toggle('hide');">
      Check</label>
      <br />
      <label class="choice">
       <input id="Paypal" name="field_Payment" type="radio" value="PayPal" class="required" onclick="toggle('show');">
      PayPal</label>
    
      <br />
    </div>
    
    <div class="FormGroup" style="display:none" id="mytext">
      <h2 class="description">PayPal Email Address</h2>
      <label for="field_Payment" class="error" > Required </label>
      <br>
      <div class="explanation">If PayPal email address is different from above, please specify here:</div>                                                
      <input type="text" name="paypal_address" id="mytext" size="40">
    </div>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles