Text box to appear only when radio button selected

**frshjb373** · 09-22-2012 11:37 AM

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>

**JMRKER** · 09-22-2012 06:22 PM

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: Text box to appear only when radio button selected

Thread Tools

Display

Text box to appear only when radio button selected

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions