Hide text box on page load

[frshjb373]

I'm using the following Javascript and HTML code to hide/display a text box based on the selection of a radio button. By default, the textbox appears on page load and even after the form is submitted for validation and "PayPal" is checked...the textbox still appears. I'd like it to only show the text box only when "check" is checked. I'm definitely a complete rookie to Javascript so any help is much appreciated!!

Javascript:

function toggle(value){
if(value=='show')
 document.getElementById('mytext').style.visibility='visible';
else
 document.getElementById('mytext').style.visibility='hidden';
}

HTML:

<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]

Looks like the same or similar question on http://www.webdeveloper.com/forum/sh...TML-Javascript
See post #2 for a recommendation.

[George88]

Your code is hard to read with this new webdeveloper.com style/theme, but if you want to hide the element on page load, you can do this:

<script type="text/javascript">
window.addEventListener
(
    "load", 
    function()
    {
        document.getElementById("something").style.display = "none";
    }, false
);
</script>

I prefer using style.display since it completely removes the element from view, whilst visibility:hidden keeps the space occupied by the element unusable.

[JMRKER]

Looks like the same or similar question on http://www.webdeveloper.com/forum/sh...TML-Javascript
See post #2 for a recommendation.

Should have been link to:
http://www.webdeveloper.com/forum/sh...d&daysprune=30