Заполнять текстовое поле при выборе переключателя

У меня есть 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>

javascript textfield html radio-button
person e-beth    schedule 03.10.2013    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Измените следующие две строки кода, добавив событие onchange:

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

Если это не работает, это может быть ваш браузер. document.getElementByID — это объект, за исключением всех браузеров.

person userDEV    schedule 03.10.2013
comment
Спасибо!! Я забыл this в testResults(this.form) - person e-beth; 03.10.2013
comment
Просто заметка о поведении в разных браузерах: в Firefox все работает отлично! В Internet Explorer требуется щелкнуть где-нибудь за пределами переключателя, прежде чем изменение будет распознано. - person e-beth; 03.10.2013