javascriptフォーム - ajaxのデフォルトの動作をバイパスします

私は以下のコードを使用しようとしています。私が望むのは、ラジオボタンが選択され、javascriptメソッドに返される値を取得することです。私が試したどんなバリエーションも失敗するようです。javascriptフォーム - ajaxのデフォルトの動作をバイパスします

<html> 
    <head> 
    <style type="text/css"> 
     body { background-color: black; color: white; } 
    </style> 
    <script type="text/javascript"> 
     function handleClick(event) 
     { 

     alert(this.textBox1.value); 

     event.preventDefault(); // disable normal form submit behavior 
     return false; // prevent further bubbling of event 
     } 

    </script> 
    </head> 
    <body"> 
    <form name="myform"> 
     <div> 
<input type="radio" name="test1" value="Cheese"> 
<input type="radio" name="test2" value="Grapes"> 
<input type="radio" name="test3" value="Crackers"> 
     </div> 
     <input type="submit" onsubmit=JavaScript:handleClick(value) value="Update"/> 
    </form> 
    </body> 
</html>

出典

2009-03-19 Joshxtothe4

コードの一部が不足しているようです。 – Steerpike

は、不足している部分を表示するための質問を編集しました。 – seth

あなたがyour other questionに投稿された同じ一般的なコードの話をしている場合は、私はあなたが可能ラジオボタンをループするために持っていると信じています。 whichRadioButtonIsSelected（）関数は組み込まれていません。あなたが行うことができ

このような何か：

function getRadioButtonValue(rbutton) 
{ 
    for (var i = 0; i < rbutton.length; ++i) 
    { 
    if (rbutton[i].checked) 
     return rbutton.value; 
    } 
    return null; 
} 

// then in your code, where "this" is the form object, and 
var rbvalue = getRadioButtonValue(this.radiobutton); 
// replace "radiobutton" with whatever the radiobutton group's name is

編集：はここに例を示します

<html> 
    <head> 
    <style type="text/css"> 
     body { background-color: black; color: white; } 
    </style> 
    <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) 
     { 
     if (console) console.info("handling click"); 
     // for Firebug debugging, if you want it 

    /* do something here */ 
     alert(this.textBox1.value); 
     alert("Favorite weird creature: "+getRadioButtonValue(this["whichThing"])); 
     // I don't like alerts but it works everywhere 

     if (console) console.info("handled click"); 

     event.preventDefault(); // disable normal form submit behavior 
     return false; // prevent further bubbling of event 
     } 
     function doit() 
     { 
     if (console) console.info("starting doit()"); 
     document.forms.myform.addEventListener("submit", handleClick, true); 
     return true; 
     } 
    </script> 
    </head> 
    <body onload="doit()"> 
    <form name="myform"> 
     <div> 
      <textarea name="textBox1" rows="10" cols="80"> 
'Twas brillig, and the slithy toves 
Did gyre and gimble in the wabe; 
All mimsy were the borogoves, 
And the mome raths outgrabe. 
     </textarea> 
     </div> 
     <input 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> 
    </body> 
</html>

出典

2009-03-19 16:08:41

遅れて申し訳ありません。私は、EventListnerの代わりにSubmitボタンを使ってこのサンプルを使用する方法を実際に試していました。また、私はあなたのコードを試しているし、submitは何もしません... –

あなたはInternet Explorerを使用している必要があります - それはFirefoxとSafariの私のためにうまく動作します。 IE 7.0で試してみましたが、何もしません。 IE8で何が壊れているのか分かりません... –

修正：IE7では何かしますが、フォームのデフォルトの動作は引き続き（URLがクエリ文字列を含むように変更されます）。 –

それが私だったら、私はjQueryのようなフレームワークを使用します。セレクタ「フォーム入力：ラジオ」（セレクタで非常に正確なことができます）に一致するすべてのラジオボタンは、doThis関数に関連付けられます。私はこれを別の機能にしましたが、それは分かりやすくするためのものでした。

はそのまま動作しますが、JQUERYを使用する場合はローカルコピーを取得してください。

<html> 
<body> 
    <form> 
     IAMFOO <input type="radio" name="foobar" value="foo"/> 
     IAMBAR <input type="radio" name="foobar" value="bar"/> 
    </form> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 
<script type="text/javascript"> 
    function dothis() { 
    alert(this.value); 
    } 
    $(document).ready(function(){ 
    $("form input:radio").click(dothis) 
    }); 
</script> 

</body> 
</html>

出典

2009-03-20 04:00:20

あなたのコードは、カットされたが、私はあなたがこのような何かをしたいと思います：

<html> 
<head> 
    <script type="text/javascript"> 
     function alertThing() { 
      alert(document.getElementsByName('textBox1')[0].value); 
      return false; 
     } 
    </script> 
</head> 
<body> 
    <form action="myPage.php" method="post" onsubmit="return alertThing();"> 
     <input type="text" name="textBox1" value="hello" /> 
     <input type="submit" value="Submit the form!" /> 
    </form> 
</body> 
</html>

は、これは値を警告しますが、それはフォームを送信しません。私はあなたを助けたと思う！

// LinusUnnebäck

出典

2009-07-30 21:15:44

javascriptフォーム - ajaxのデフォルトの動作をバイパスします

答えて

関連する問題