it-swarm.com.ru

вызов 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>
48
Joshxtothe4

В этом фрагменте кода:

getRadioButtonValue(this["whichThing"]))

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

[~ # ~] edit [~ # ~] Чтобы получить значение из переключателей, возьмите библиотеку 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 формы. В качестве альтернативы можно заменить стандартную кнопку SUBMIT и поместить ее в событие OnClick для кнопки. Я также удалил ненужный "JavaScript" перед именем функции и добавил явный RETURN для значения, выходящего из функции.

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

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

РЕДАКТИРОВАТЬ 4 Просто чтобы быть ясно. document.aye ["whichThing"] предоставит вам прямой доступ к выбранному значению, но document.aye. whichThing дает вам доступ к коллекции переключателей, которые вы затем должны проверить. Поскольку вы используете функцию "getRadioButtonValue (object)" для итерации коллекции, вам необходимо использовать 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
Stephen Wrighton

Вы можете использовать форму URL Javascript с

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

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

<form onSubmit="return handleClick()">

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

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

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>
64
Miquel

Красивый пример от 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)"> 
11
K.David

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

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

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

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

  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

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

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

0
Konstantin Tarkus