web-dev-qa-db-ja.com

htmlフォームからjavascriptを呼び出す

this questionのジェイソンの答えに基づいて質問と例を作成しています

私は、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>
javascripthtmljavascript-eventsforms
48
Joshxtothe4

このコードの一部で：

getRadioButtonValue(this["whichThing"]))

実際には何も参照していません。したがって、getradiobuttonvalue関数のラジオボタンは未定義であり、エラーがスローされます。

EDITラジオボタンから値を取得するには、 JQuery ライブラリを取得し、これを使用します。

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

Edit 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))

Edit 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を追加しました。

関数自体で、フォームへのアクセス方法を変更しました。構造は次のとおりです。document。[フォーム名]。[コントロール名] ayeの名前を変更したため、document.myformを変更する必要がありました。 document.ayeに。また、document.aye ["whichThing"]は、このコンテキストではdocument.aye.whichThing。

最後のビットは、event.preventDefault（）;をコメントアウトしたことです。このサンプルにはその行は必要ありませんでした。

EDIT 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

次のいずれかでjavascript urlフォームを使用できます

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

または、onSubmitイベントハンドラーを使用します

<form onSubmit="return handleClick()">

後のフォームでは、handleClickからfalseを返すと、通常の送信手順が妨げられます。ブラウザが通常の送信手順に従うようにする場合は、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>
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. ブラウザでイベントオブジェクトを取得してキャンセルすることは、非常に複雑なプロセスです。ブラウザのタイプとバージョンによって大きく異なります。 IEとFirefoxはこれらのことを非常に異なる方法で処理するため、単純なevent.preventDefault()は機能しません...実際、これはイベント変数は、タグ。これが、上記のStephenがフレームワークを提案しようと懸命に努力している理由です。メカニズムを知りたいと思うので、Googleをお勧めします。この場合、簡単な回避策として、上記の番号2のようにonclickタグでreturn falseを使用します（またはstephenが示唆したように関数から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