选择单选按钮时填充文本字段

时间:2013-10-03 13:45:17

标签: javascript html radio-button textfield

我有一个HTML表单,当我选择其中一个单选按钮时,我试图获取一个文本字段来显示某些文本。到目前为止,我有它到哪里如果我点击按钮它将在文本字段中显示正确的文本。我的目标是消除“点击”按钮,并在我选择单选按钮时让文本字段立即显示文本。我怎么能用Javascript做到这一点?

我知道文本字段有一个'OnKeyUp'事件,但我似乎无法弄清楚单选按钮是否有某种类似的东西可以让我确定何时选择一个。我已经尝试过OnChange和OnFocus事件,但也许我做错了因为我无法让它们工作。任何和所有建议都非常感谢。

这是我到目前为止所做的:

<HTML>
  <HEAD>
    <TITLE>Test Input</TITLE>
    <SCRIPT LANGUAGE="JavaScript">
      function testResults (form) {
      var TestVar1 = form.input[0].checked;
      var TestVar2 = form.input[1].checked;
        if (TestVar1 == true) {
          form.textbox.value = "red";
        } else if (TestVar2 == true){
          form.textbox.value = "blue";
        } else if (TestVar1 == false && TestVar2 == false) {
          form.textbox.value = "";
        }
      }
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myform" ACTION="" METHOD="POST">Choose a Color: <BR>
  <INPUT TYPE="radio" NAME="input" VALUE="red">red<P>
  <INPUT TYPE="radio" NAME="input" VALUE="blue">blue<P>
  <INPUT TYPE="button" NAME="button" VALUE="Click" onClick="testResults(this.form)">
  <P>Selected:</P> <INPUT TYPE="text" ID="textbox" NAME="selected" VALUE=""></div><p>

</FORM>
</BODY>
</HTML>

1 个答案:

答案 0 :(得分:2)

添加onchange事件更改以下两行代码:

TYPE="radio" NAME="input" VALUE="red"  onchange="testResults(this.form)
TYPE="radio" NAME="input" VALUE="blue" onchange="testResults(this.form)

如果不起作用,可能是您的浏览器。 document.getElementByID是除所有浏览器之外的对象