Radio Button Select & Textbox Focus

JavaScript
1

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?

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

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

Define where? :wink:

4 
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;
    }
}
5

Excellent! Cheers :wink:
One last thing, how do you clear the text in the textbox upon the first radio button being clicked?

6

I need it so if more radio buttons are added, and any of them of clicked, the textbox contents/text should get deleted :wink:

7

lol - I left my alert in the code :blush:

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:

var myRadioButton = document.getElementsByName("radiobutton")[1];
var myTextArea = document.getElementsByName("textfield")[0];
8

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 :wink:

9

Use an if else statement such as pseudo 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.

10

There will be only the one textbox, but approx 5 radio buttons :wink:

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