Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Dec 2004
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Javascript to highlight text field w/radio button click?

    I'm trying to build a form with a radio button group for various charitable donation amounts. Here's the basic coding so far:

    <p>
    <label>
    <input type="radio" name="DonationAmount" value="1000">
    $1000</label>
    <br>
    <label>
    <input type="radio" name="DonationAmount" value="500">
    $500</label>
    <br>
    <label>
    <input type="radio" name="DonationAmount" value="250">
    $250</label>
    <br>
    <label>
    <input type="radio" name="DonationAmount" value="100">
    $100</label>
    <br>
    <label>
    <input type="radio" name="DonationAmount" value="50">
    $50</label>
    <br>
    <label>
    <input type="radio" name="DonationAmount" value="30">
    $30</label>
    <br>
    <label>
    <input type="radio" name="DonationAmount" value="Other">
    Other</label>
    <input name="OtherAmount" type="text" id="OtherAmount" value=" $">
    </p>

    What I want to happen is have the text field shaded out by default. If someone clicks the "Other" radio button, this will cause the text field to highlight and the user can enter an amount there.

    I've seen this done elsewhere but can't remember where. I assume it's a script that does it.

    Any help will be appreciated!!

  • #2
    Regular Coder
    Join Date
    Jan 2004
    Location
    Port Huron, MI, U.S.A.
    Posts
    280
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <script language="JAVASCRIPT">
    var Temp;
    function Whatever()
    {
    for (var i=0;i<donationAmount.length;i++)
    {
    if (donationAmount[i].checked) {Temp=donationAmount[i].value}
    }
    if (Temp=='other') {textBoxNameHere.disabled=false;textBoxNameHere.focus()}
    }
    
    </script>
    Oh, was I supposed to put something here? ........

  • #3
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I do not know what you mean by shaded out by default....

    If you mean disabled... I would not advise disabling any form elements by default which you would like to use and have work for those visitors with javascript disabled... Particularly in this case where the form will be used to elicit donations from your visitors... After all, it would be rather rude to tell visitors that wish to donate that they can not donate unless they have javascript enabled... In other words... Your form should work without javascript enabled and javascript should only be used to enhance the interactivity of the form but not dependant upon it...

    Anyways, the below placed into the HEAD should add some functionality to the form (hide/show the OtherAmount text input, change the background color to yellow, validate that only numbers are enter into the field and round the value to two decimal places)... No changes should be needed to the form itself...

    Code:
    
    <script type="text/javascript">
     <!--//
      function chkDonation(){
       var form = document.forms[0];     // FORM NAME OR PLACE IN FORMS COLLECTION //;
       var amount = form['OtherAmount']; // TARGETTED INPUT NAME ( OtherAmount )   //;
           amount.style.visibility = 'hidden';
    
        for(var i=0, input=form.getElementsByTagName('input'); i<input.length; i++){
          if(input[i].type.match(/radio/i) && input[i].name.match(/DonationAmount/i)){
            if(input[i].value.match(/Other/i)){
               input[i].onclick = function(){
               amount.style.visibility = 'visible';
               amount.style.backgroundColor = 'yellow';
               amount.value = '';
               amount.focus();
               amount.onchange = function(){
                  if(isNaN(this.value)){
                     alert('Please enter only numbers in this field!');
                     this.style.backgroundColor = 'yellow';
                     this.value = ''; return; 
                  }  this.style.backgroundColor = ''; 
                     this.value = Number(this.value).toFixed(2);
                }  
              }
            }
            else{ 
               input[i].onclick = function(){
               amount.style.visibility = 'hidden';
              }
            }
          }
        }
      }
    
      window.onload = chkDonation;
     //-->
    </script>
    </head>
    
    <body>
    <form> 
    <label> 
    <input type="radio" name="DonationAmount" value="1000">
    $1000</label>
    <br>
    <label> 
    <input type="radio" name="DonationAmount" value="500">
    $500</label>
    <br>
    <label> 
    <input type="radio" name="DonationAmount" value="250">
    $250</label>
    <br>
    <label> 
    <input type="radio" name="DonationAmount" value="100">
    $100</label>
    <br>
    <label> 
    <input type="radio" name="DonationAmount" value="50">
    $50</label>
    <br>
    <label> 
    <input type="radio" name="DonationAmount" value="30">
    $30</label>
    <br>
    <label> 
    <input type="radio" name="DonationAmount" value="Other">
    Other</label>
    <input name="OtherAmount" type="text" id="OtherAmount" value="$">
    </form>
    .....Willy
    Last edited by Willy Duitt; 12-12-2004 at 06:48 AM.

  • #4
    New to the CF scene
    Join Date
    Dec 2004
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Good point, Willy. I'll rethink how I construct the form. But I'll also try your script, to see what it does so I can further my understanding. Thanks!

    Thanks also, Bobo, for your response.

    One other question, off topic: How do you get the code in your message to appear in a textarea (in this forum)? As you can see from my original, I don't know how to do this and I can't seem to find it in the FAQ.


  •  

    Posting Permissions

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