Вызов javascript из html-формы

Я основываю свой вопрос и пример на ответе Джейсона в этом вопросе

Я пытаюсь избежать использования eventListner и просто вызвать handleClick onsubmit, когда нажата кнопка отправки.

Абсолютно ничего не происходит с кодом, который у меня есть.

Почему дескриптор handleClick не вызывается?

<html>
  <head>
    <script type="text/javascript">
      function getRadioButtonValue(rbutton)
      {
        for (var i = 0; i < rbutton.length; ++i)
        { 
          if (rbutton[i].checked)
            return rbutton[i].value;
        }
        return null;
      }

      function handleClick(event)
      {
        alert("Favorite weird creature: "+getRadioButtonValue(this["whichThing"]));
        event.preventDefault(); // disable normal form submit behavior
        return false; // prevent further bubbling of event
      }
    </script>
  </head>
<body>
    <form name="myform" onSubmit="JavaScript:handleClick()">
      <input name="Submit"  type="submit" value="Update" onClick="JavaScript:handleClick()"/>
      Which of the following do you like best?
      <p><input type="radio" name="whichThing" value="slithy toves" />Slithy toves</p>
      <p><input type="radio" name="whichThing" value="borogoves" />Borogoves</p>
      <p><input type="radio" name="whichThing" value="mome raths" />Mome raths</p>
    </form>
</body>
</html>

изменить:

Пожалуйста, не предлагайте фреймворк как решение.

Вот соответствующие изменения, которые я внес в код, что приводит к такому же поведению.

      function handleClick()
      {
        alert("Favorite weird creature: "+getRadioButtonValue(document.myform['whichThing'])));
        event.preventDefault(); // disable normal form submit behavior
        return false; // prevent further bubbling of event
      }
    </script>
  </head>
<body>
<form name="aye">;
      <input name="Submit"  type="submit" value="Update" action="JavaScript:handleClick()"/>
      Which of the following do you like best?
      <p><input type="radio" name="whichThing" value="slithy toves" />Slithy toves</p>
      <p><input type="radio" name="whichThing" value="borogoves" />Borogoves</p>
      <p><input type="radio" name="whichThing" value="mome raths" />Mome raths</p>
    </form>

Ответы

Ответ 1

В этом бите кода:

getRadioButtonValue(this["whichThing"]))

вы на самом деле не ссылаетесь ни на что. Таким образом, ваша радиомаяк в функции getradiobuttonvalue имеет значение undefined и выдает ошибку.

ИЗМЕНИТЬ Чтобы получить значение из переключателей, возьмите библиотеку JQuery, а затем используйте это:

  $('input[name=whichThing]:checked').val()

Изменить 2 Из-за желания изобретать колесо здесь код, не являющийся JQuery:

var t = '';
for (i=0; i<document.myform.whichThing.length; i++) {
     if (document.myform.whichThing[i].checked==true) {
         t = t + document.myform.whichThing[i].value;
     }
}

или, в основном, изменить исходную строку кода для чтения следующим образом:

getRadioButtonValue(document.myform.whichThing))

Изменить 3 Здесь ваша домашняя работа:

      function handleClick() {
        alert("Favorite weird creature: " + getRadioButtonValue(document.aye.whichThing));
        //event.preventDefault(); // disable normal form submit behavior
        return false; // prevent further bubbling of event
      }
    </script>
  </head>
<body>
<form name="aye" onSubmit="return handleClick()">
     <input name="Submit"  type="submit" value="Update" />
     Which of the following do you like best?
     <p><input type="radio" name="whichThing" value="slithy toves" />Slithy toves</p>
     <p><input type="radio" name="whichThing" value="borogoves" />Borogoves</p>
     <p><input type="radio" name="whichThing" value="mome raths" />Mome raths</p>
</form>

Обратите внимание на следующее: я переместил вызов функции в событие Form "onSubmit". Альтернативой было бы изменить кнопку SUBMIT на стандартную кнопку и поместить ее в событие OnClick для кнопки. Я также удалил ненужный "JavaScript" перед именем функции и добавил явное RETURN на значение, выходящее из функции.

В самой функции я изменил способ обращения к форме. Структура: . [ИМЯ ФОРМЫ]. [ИМЯ КОНТРОЛЯ], чтобы получить информацию. Поскольку вы переименовали его из aye, вам пришлось изменить document.myform. to document.aye. Кроме того, document.aye [ "whichThing" ] в этом контексте просто неверен, поскольку ему необходимо быть document.aye.whichThing.

Последний бит, я прокомментировал event.preventDefault();. эта строка не нужна для этого образца.

РЕДАКТИРОВАТЬ 4 Просто чтобы быть ясным. document.aye [ "whichThing" ] предоставит вам прямой доступ к выбранному значению, но document.aye.whichThing получит доступ к коллекции переключателей, которые вы тогда Нужно проверить. Поскольку вы используете функцию getRadioButtonValue (объект) для итерации по коллекции, вам нужно использовать document.aye.whichThing.

См. разницу в этом методе:

function handleClick() {
   alert("Direct Access: " + document.aye["whichThing"]);
   alert("Favorite weird creature: " + getRadioButtonValue(document.aye.whichThing));
   return false; // prevent further bubbling of event
}

Ответ 2

Вы можете использовать форму URL-адреса javascript с помощью

<form action="javascript:handleClick()">

Или использовать обработчик события onSubmit

<form onSubmit="return handleClick()">

В более поздней форме, если вы вернете false из handleClick, это предотвратит обычную процедуру подстановки. Верните true, если вы хотите, чтобы браузер выполнял обычную процедуру подстановки.

Ваш обработчик события onSubmit в кнопке также терпит неудачу из-за Javascript: part

EDIT: Я просто пробовал этот код, и он работает:

<html>
  <head>
    <script type="text/javascript">

      function handleIt() {
        alert("hello");
      }

    </script>
  </head>

<body>
    <form name="myform" action="javascript:handleIt()">
      <input name="Submit"  type="submit" value="Update"/>
    </form>
</body>
</html>

Ответ 3

Достаточно повторить пример Miquel (# 32):

<html>
 <head>
  <script type="text/javascript">
   function handleIt(txt) {   // txt == content of form input
    alert("Entered value: " + txt);
   }
  </script>
 </head>
 <body>
 <!-- javascript function in form action must have a parameter. This 
    parameter contains a value of named input -->
  <form name="myform" action="javascript:handleIt(lastname.value)">  
   <input type="text" name="lastname" id="lastname" maxlength="40"> 
   <input name="Submit"  type="submit" value="Update"/>
  </form>
 </body>
</html>

И форма должна иметь:

<form name="myform" action="javascript:handleIt(lastname.value)">

Ответ 4

В отредактированной версии есть несколько изменений:

Вы решили использовать document.myform['whichThing'] слишком буквально. Ваша форма называется "aye", поэтому код для доступа к кнопкам, которые должны использовать теги, должен использовать это имя: `document.aye ['whichThing'].
Нет атрибута action для тега <input>. Вместо этого используйте onclick: <input name="Submit" type="submit" value="Update" onclick="handleClick();return false"/>
Получение и отмена объекта Event в браузере - очень сложный процесс. Это зависит от типа браузера и его версии. IE и Firefox обрабатывают эти вещи совсем по-другому, поэтому простой event.preventDefault() не будет работать... на самом деле переменная события, вероятно, даже не будет определена, потому что это обработчик onclick из тега. Вот почему Стивен так старался предложить фреймворк. Я понимаю, что вы хотите знать механику, и я рекомендую Google для этого. В этом случае, в качестве простого обходного пути, используйте return false в теге onclick, как в номере 2 выше (или верните false из функции, предложенной Stephen).
Из-за # 3 избавиться от всего, что не является оператором предупреждения в вашем обработчике.

Теперь код должен выглядеть следующим образом:

function handleClick()
      {
        alert("Favorite weird creature: "+getRadioButtonValue(document.aye['whichThing']));
      }
    </script>
  </head>
<body>
    <form name="aye">
      <input name="Submit"  type="submit" value="Update" onclick="handleClick();return false"/>
      Which of the following do you like best?
      <p><input type="radio" name="whichThing" value="slithy toves" />Slithy toves</p>
      <p><input type="radio" name="whichThing" value="borogoves" />Borogoves</p>
      <p><input type="radio" name="whichThing" value="mome raths" />Mome raths</p>
    </form>

Ответ 5

Удалите javascript: из onclick=".., onsubmit=".. объявлений

javascript: префикс используется только в href="" или аналогичных атрибутах (не связанных событиях)