www.webdeveloper.com
Results 1 to 4 of 4

Thread: Hide text box on page load

  1. #1
    Join Date
    Sep 2012
    Posts
    5

    Hide text box on page load

    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:
    Code:
    function toggle(value){
    if(value=='show')
     document.getElementById('mytext').style.visibility='visible';
    else
     document.getElementById('mytext').style.visibility='hidden';
    }
    HTML:
    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,350
    Looks like the same or similar question on http://www.webdeveloper.com/forum/sh...TML-Javascript
    See post #2 for a recommendation.

  3. #3
    Join Date
    Sep 2011
    Location
    Bristol, England, United Kingdom
    Posts
    192
    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:

    Code:
    <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.

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,350
    Quote Originally Posted by JMRKER View Post
    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

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