вызов JavaScript из формы HTML - PullRequest
46 голосов
/ 26 марта 2009

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

Я пытаюсь избежать использования 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>

Ответы [ 5 ]

61 голосов
/ 26 марта 2009

Вы можете использовать форму 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>
28 голосов
/ 26 марта 2009

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

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
}
10 голосов
/ 17 ноября 2016

Красивый пример от 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)"> 
1 голос
/ 26 марта 2009

Есть несколько вещей, которые нужно изменить в отредактированной версии:

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

  2. Нет такой вещи как атрибут action для тега <input>. Вместо этого используйте 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>
0 голосов
/ 26 марта 2009

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

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

...