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

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

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

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

Почему handleClick не быть названным?


  
    
  

    
Which of the following do you like best?

Slithy toves

Borogoves

Mome raths

править:

Не предлагайте платформу в качестве решения.

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

      function handleClick()
      {
        alert("Favorite weird creature: "+getRadioButtonValue(document.myform['whichThing'])));
        event.preventDefault(); // disable normal form submit behavior
        return false; // prevent further bubbling of event
      }
    
  

; Which of the following do you like best?

Slithy toves

Borogoves

Mome raths

49
задан Brian Tompsett - 汤莱恩 2 November 2019 в 11:44
поделиться

5 ответов

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

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
поделиться

Все, кажется, прекрасно в Вашем коде кроме того, что handleClick () не работает, потому что эта функция испытывает недостаток в параметре в своем вызове вызова функции (но функциональное определение в имеет аргумент, который делает функциональное несоответствие для появления).

следующее является демонстрационным рабочим кодом для вычисления общих меток всего семестра и соответствующего класса. Это демонстрирует использование функции JavaScript (вызов) в файле HTML и также решает проблему, с которой Вы сталкиваетесь.

<!DOCTYPE html>
<html>
<head>
    <title> Semester Results </title>
</head>
<body>
    <h1> Semester Marks </h1> <br> 
    <script type = "text/javascript">
        function checkMarks(total)
        {
            document.write("<h1> Final Result !!! </h1><br>");
            document.write("Total Marks = " + total + "<br><br>");
            var avg = total / 6.0;
            document.write("CGPA = " + (avg / 10.0).toFixed(2) + "<br><br>");
            if(avg >= 90)
                document.write("Grade = A");
            else if(avg >= 80)
                document.write("Grade = B");
            else if(avg >= 70)
                document.write("Grade = C");
            else if(avg >= 60)
                document.write("Grade = D");
            else if(avg >= 50)
                document.write("Grade = Pass");
            else
                document.write("Grade = Fail");
       }
    </script>
    <form name = "myform" action = "javascript:checkMarks(Number(s1.value) + Number(s2.value) + Number(s3.value) + Number(s4.value) + Number(s5.value) + Number(s6.value))"/>
        Semester 1:  <input type = "text" id = "s1"/> <br><br>
        Semester 2:  <input type = "text" id = "s2"/> <br><br>
        Semester 3:  <input type = "text" id = "s3"/> <br><br>
        Semester 4:  <input type = "text" id = "s4"/> <br><br>
        Semester 5:  <input type = "text" id = "s5"/> <br><br>
        Semester 6:  <input type = "text" id = "s6"/> <br><br><br>
        <input type = "submit" value = "Submit"/>
    </form>
</body>
</html>
0
ответ дан 7 November 2019 в 11:35
поделиться
Другие вопросы по тегам:

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