SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Addict
    Join Date
    Jun 2008
    Posts
    279
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Radio Button Select & Textbox Focus

    Hi

    Using the following code, how do I create an external JavaScript file that puts the cursor in the textbox, upon the second radio button being clicked, and automatically selects the second radio button, upon the textbox being clicked?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script language="JavaScript" type="text/JavaScript" src="JavaScript.js"></script>
    
    </head>
    
    <body>
    <form name="form1" method="post" action="">
      <input type="radio" name="radiobutton" value="radiobutton">
      <br>
      <input type="radio" name="radiobutton" value="radiobutton">
      <input type="text" name="textfield">
    </form>
    </body>
    </html>

  2. #2
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    myRadioButton.onclick = function() {
        myTextArea.focus();
    }
    myTextArea.onfocus = function() {
        myRadioButton.checked = true;
    }
    You will need to define myRadioButton and myTextArea. You would probably want to use document.getElementById()

    I used the onfocus event for the text area because a user may tab to it, but you could use the onclick event instead.

  3. #3
    SitePoint Addict
    Join Date
    Jun 2008
    Posts
    279
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Define where?

  4. #4
    SitePoint Zealot bgil's Avatar
    Join Date
    Apr 2009
    Location
    So. California
    Posts
    124
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    window.onload = function() {
    
        var myRadioButton = document.form1.getElementsByTagName("INPUT")[1];
        var myTextArea = document.form1.getElementsByTagName("INPUT")[2];
    
        myRadioButton.onclick = function() {
            alert("Click");
            myTextArea.focus();
        }
        myTextArea.onfocus = function() {
            myRadioButton.checked = true;
        }
    }
    -Brad

  5. #5
    SitePoint Addict
    Join Date
    Jun 2008
    Posts
    279
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent! Cheers
    One last thing, how do you clear the text in the textbox upon the first radio button being clicked?

  6. #6
    SitePoint Addict
    Join Date
    Jun 2008
    Posts
    279
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I need it so if more radio buttons are added, and any of them of clicked, the textbox contents/text should get deleted

  7. #7
    SitePoint Zealot bgil's Avatar
    Join Date
    Apr 2009
    Location
    So. California
    Posts
    124
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    lol - I left my alert in the code

    Use myTextArea.value = ""; to clear the text.
    If you don't clear the text, then in addition to myTextArea.focus(); I would add myTextArea.select();

    An alternative method to get a handle on your elements:
    Code:
    var myRadioButton = document.getElementsByName("radiobutton")[1];
    var myTextArea = document.getElementsByName("textfield")[0];
    -Brad

  8. #8
    SitePoint Addict
    Join Date
    Jun 2008
    Posts
    279
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Where would I need to put (myTextArea.value = "") so that if any of the radio buttons but one is clicked, then the textbox text should be deleted?
    To sum up what I need, one radio button should select the textbox, and any others should delete the contents within the textbox

  9. #9
    SitePoint Zealot bgil's Avatar
    Join Date
    Apr 2009
    Location
    So. California
    Posts
    124
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use an if else statement such as pseudo code:

    Code:
    if (textarea-to-clear == textarea-id) {
      myTextArea.value = "";
    }
    else {
      myTextArea.focus();
      ...
    }
    I'm not sure how many buttons and textboxes you have, but proper naming of html IDs and JavaScript loop structure can achieve with few lines of code.
    -Brad

  10. #10
    SitePoint Addict
    Join Date
    Jun 2008
    Posts
    279
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There will be only the one textbox, but approx 5 radio buttons

  11. #11
    SitePoint Zealot bgil's Avatar
    Join Date
    Apr 2009
    Location
    So. California
    Posts
    124
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HTML Code:
    <head>
        <title>rb click</title>
        <script type="text/javascript">
            window.onload = function() {
                var focusBtn = 1;  // element in rb array to set focus - all other rbs will clear
                var myRadioButtons = document.getElementsByName("radiobutton");
                var tb = document.getElementsByName("textfield")[0];
                // alternative
                // var tb = document.getElementById("txt0");
    
                for (var rb = 0; rb < myRadioButtons.length; rb++) {
                    if (rb == focusBtn) {
                        myRadioButtons[rb].onclick = function() {
                            tb.select();
                            tb.focus();
                        }
                    }
                    else {
                        myRadioButtons[rb].onclick = function() {
                            tb.value = "";
                        }
                    }
                }
            }
        </script>
    </head>
    <body>
        <form name="form1" method="post" action="">
            <input type="radio" name="radiobutton" id="rb0" value="rb0" />
            <input type="text" name="textfield" id="txt0" />
            <br />
            <input type="radio" name="radiobutton" id="rb1" value="rb1" />
            <br />
            <input type="radio" name="radiobutton" id="rb2" value="rb2" />
        </form>
    </body>
    -Brad


Bookmarks

Posting Permissions

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