Вызов JavaScript от формы HTML

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

Я стараюсь не использовать eventListener, и только звонить 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>
49
задан Brian Tompsett - 汤莱恩 2 November 2019 в 11:44
поделиться

0 ответов

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

getRadioButtonValue(this["whichThing"]))

Вы на самом деле не получаете ссылку ни на что. Поэтому Ваш переключатель в функции getradiobuttonvalue не определен и бросает ошибку.

РЕДАКТИРОВАНИЕ Для вытаскивания значения из переключателей захватите библиотеку 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>

Заметьте следующее, я переместил вызов функции в "onSubmit" событие Формы. Альтернатива должна была бы изменить Вашу Кнопку отправки на стандартную кнопку и поместить ее в событие OnClick для кнопки. Я также удалил ненужный "JavaScript" перед именем функции и добавил явный ВОЗВРАТ на значении, выходящем из функции.

В самой функции я изменил, как к форме получали доступ. Структура: документ. [ИМЯ ФОРМЫ]. [ИМЯ ЭЛЕМЕНТА УПРАВЛЕНИЯ] для достигания вещей. Так как Вы переименовали Ваш от да, необходимо было изменить document.myform. на 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
}
28
ответ дан sonrad10 7 November 2019 в 11:35
поделиться

Можно или использовать форму URL JavaScript с

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

Или используйте onSubmit обработчик событий

<form onSubmit="return handleClick()">

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

Ваш onSubmit обработчик событий в кнопке также перестал работать из-за Javascript: часть

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

<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>
65
ответ дан Miquel 7 November 2019 в 11:35
поделиться

Существует несколько вещей измениться в Вашей отредактированной версии:

  1. Вы взяли предложение использования document.myform['whichThing'] немного слишком буквально. Вашу форму называют "да", таким образом, код для доступа к whichThing переключателям должен использовать то имя: 'document.aye['whichThing'].

  2. Нет такой вещи как action атрибут для <input> тег. Использовать onclick вместо этого: <input name="Submit" type="submit" value="Update" onclick="handleClick();return false"/>

  3. Получение и отмена Объекта-события в браузере являются очень включенным процессом. Это варьируется много типом браузера и версией. IE и Firefox обрабатывают эти вещи очень по-другому, таким образом, простое event.preventDefault() не будет работать... на самом деле, переменная события, вероятно, не будет даже определена, потому что это - onclick обработчик от тега. Поэтому Stephen выше так старается предлагать платформу. Я понимаю, что Вы хотите знать механику, и я рекомендую Google для этого. В этом случае, как простое обходное решение, использовать return false в теге onclick как в номере 2 выше (или возвратите false от функции как stephen предложенный).

  4. Из-за № 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>
1
ответ дан Jarret Hardie 7 November 2019 в 11:35
поделиться

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

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

0
ответ дан Sanjay Manohar 7 November 2019 в 11:35
поделиться
Другие вопросы по тегам:

Похожие вопросы: