получение переменных формы с помощью JavaScript - PullRequest
3 голосов
/ 12 марта 2009

У меня есть следующая форма (отраженная через php), которая, когда выбрана радиокнопка, я хочу, чтобы это значение было передано в функцию javascript, с которой я затем могу иметь дело.

<form id=\"form1\" name=\"form1\" method=\"\" action=\"JavaScript:alterRecord()\">
<input name=\"radiobutton\" type=\"radio\" value=\"test1\" />Test 2<p>
<input name=\"radiobutton\" type=\"radio\" value=\"test2\" />Test 2<p>
<input name=\"radiobutton\" type=\"radio\" value=\"test3\" />Test 3<p>
<input name=\"radiobutton\" type=\"radio\" value=\"test4\" />Test 4
<input type=\"submit\" name=\"Submit\" value=\"Submit\" />
</form>

И JavaScript

function alterRecord(value) {
alert(value);
}

Я не могу узнать, как получить javascript для получения значения формы.

Ответы [ 5 ]

4 голосов
/ 12 марта 2009

С макушки моей головы:

<form onSubmit="alterRecord">
  <input type="radio" id="radio1"/>
  ...
</form>

function alterRecord() {
  var radio1 = document.getElementById('radio1');
  alert(radio1.checked);
}
2 голосов
/ 12 марта 2009

Вы хотите, чтобы javascript срабатывал при нажатии радио-кнопки? Или когда форма отправлена?

Как уже упоминалось, вы можете использовать onsubmit = "alterRecord (this);" Тогда вы можете использовать такие команды, как

alert(this.radio1.checked);

если вы добавите идентификаторы ко всем переключателям ..

И чтобы JavaScript запускался при каждом нажатии радиокнопки

<input type="radio" onclick="alterRecord(this);" ... />

Тогда команда «this» позволит вам получить доступ к переключателю, на который нажали.

1 голос
/ 12 марта 2009

Если вы хотите что-то сделать в Javascript при отправке, но не имеет обычный запрос POST или GET (что приводит к выгрузке старой страницы и загрузке новой страницы), обязательно сделайте как то так:

<html>
  <head>
    <style type="text/css">
      body { background-color: black; color: white; }
    </style>
    <script type="text/javascript">
      function handleClick(event)
      {
        if (console) console.info("handling click");  
        // for Firebug debugging, if you want it

    /* do something here */
        alert(this.textBox1.value);
        // I don't like alerts but it works everywhere

        if (console) console.info("handled click");  

        event.preventDefault(); // disable normal form submit behavior
        return false; // prevent further bubbling of event
      }
      function doit()
      {
        if (console) console.info("starting doit()");
        document.forms.myform.addEventListener("submit", handleClick, true);
        return true;
      }
    </script>
  </head>
  <body onload="doit()">
    <form name="myform">
      <div>
          <textarea name="textBox1" rows="10" cols="80">
'Twas brillig, and the slithy toves
Did gyre and gimble in the wabe;
All mimsy were the borogoves,
And the mome raths outgrabe.
         </textarea>
      </div>
      <input type="submit" value="Update"/>
    </form>
  </body>
</html>

Строки event.preventDefault() и return false являются ключевыми. Мне также нравится использовать addEventListener, а не жестко программировать onSubmit в форме. Я думаю, это просто вопрос стиля / предпочтений. (хотя addEventListener позволяет вам иметь несколько обработчиков.)

0 голосов
/ 12 марта 2009

Сначала начните использовать jQuery .

Теперь, когда вы приступили к работе, прочитайте документы , и должно быть достаточно просто сделать что-то вроде этого:

$("input[name='radiobutton']").click(function() {
   // do stuff
});
0 голосов
/ 12 марта 2009

Атрибут action должен указывать на URL. Если вы хотите что-то сделать в javascript, когда пользователь отправляет форму, используйте атрибут onsubmit. Например, onsubmit = "alert (42)".

Если вы вызовете метод javascript из атрибута onsubmit и передадите ему «this» в качестве аргумента, вы получите доступ к тегу формы и всем его дочерним узлам и сможете определить текущее состояние различных элементов управления в будет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...