59

私の質問と例は、この質問のジェイソンの回答に基づいています

の使用を避け、送信ボタンがクリックされたときに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>
4

6 に答える 6

73

あなたはどちらかで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>
于 2009-03-25T21:33:48.640 に答える
38

このコードでは:

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

関数自体で、フォームへのアクセス方法を変更しました。構造は次のとおりです: document.[THE FORM NAME].[THE CONTROL NAME]物事を取得します。from 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
}
于 2009-03-25T21:25:16.290 に答える
3

編集したバージョンで変更することがいくつかあります。

  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 ハンドラーであるため、イベント変数はおそらく定義さえされません。これが、上記の Stephen がフレームワークを提案しようと懸命に努力している理由です。仕組みを知りたいと思っていることはわかっています。そのためにはグーグルをお勧めします。この場合、簡単な回避策として、return false上記の 2 のように onclick タグで使用します (または 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>
于 2009-03-26T17:51:19.650 に答える
-1

、宣言javascript:から削除onclick="..onsubmit="..

javascript:プレフィックスは、href=""または同様の属性でのみ使用されます (イベント関連ではありません) 。

于 2009-03-25T21:25:10.737 に答える