AJAXのようなシナリオでクリックした後にラジオボタンがチェックされていない

変更イベントがテキストフィールドの値を検証する関数にバインドされているテキストフィールドがあり、対応する検証エラーメッセージをテキストフィールドの上のDOMにスプライスする可能性があります。変更イベントが、関係のないラジオボタンの1つをクリックすることによってトリガされた場合、クリックされたラジオボタンはフォーカスを取得しますが、私とユーザーの期待に反してチェックされません。AJAXのようなシナリオでクリックした後にラジオボタンがチェックされていない

最終システムの検証はAJAXを使用してサーバー側で実行されますが、次のコードはAJAXが問題とは関係ないことを示しています。

あなたは私がここに欠けているものを私に伝えることができれば、多くの感謝：

<html> 
<head>                 
<STYLE type="text/css"> 
    .highlighted { color: red; } 
</STYLE> 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>   
</head>                 
<body>                 

<span id="errors"> 
</span> 

<label for="mytextfield">First, type something in this textfield</> 
<input type="text" id="mytextfield" name="mytextfield"/> 

<p>Second, click on one of these radio buttons</> 

<INPUT TYPE="radio" NAME="binaryquestion" VALUE="Y" >Yes</> 
<INPUT TYPE="radio" NAME="binaryquestion" VALUE="N" >No</> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     //$("#mytextfield").change(validateTextField); 
     $("#mytextfield").change(spliceInTheValidationResultMessage); 
    }); 

    function validateTextField() { 
      $.ajax({ 
       url: 'http://www.google.com', 
       success: function(data) { 
        spliceInTheValidationResultMessage(); 
       } 
      }); 
    } 

    function spliceInTheValidationResultMessage() { 
     $("#errors").append("<p>Thank you for your input!</p>").addClass("highlighted"); 
     alert("I expect the radio button that you clicked to become checked. However, close this dialog and you'll see that it will have gained the focus but is NOT checked!"); 
    }; 

</script> 
</body> 
</html>

出典

2010-12-31 user559496

ここで、ラジオボタンの状態を変更しようとしているコードはありますか？私はそれを見ることができません。 – scunliffe

このようなコードはありません。ページをブラウザにロードしてラジオボタンの1つをクリックすると、ラジオボタンがチェックされるかどうかは、まずテキストフィールドに何かを入力しなかったことを条件としています。 – user559496

問題定義のさらなる改善：問題は、ラジオボタンがチェックされるかどうかは、直前にテキストフィールドに何かを入力していないことを条件としていることです。 – user559496

をすみません、私はあなたがやろうとしているが、何をしようとする、次のトラブルのビットを持っていましたこのようなもの？

<input id="radio1" type="radio" name="binaryquestion" value="Y">Yes</> 
<input id="radio2" type="radio" name="binaryquestion" value="N">No</> 
<script type="text/javascript">$(document).ready(function() { 
    //$("#mytextfield").change(validateTextField); 
    //$("#mytextfield").change(spliceInTheValidationResultMessage); 
    $("#radio1").bind("click", spliceInTheValidationResultMessage, false); 
    $("#radio2").bind("click", spliceInTheValidationResultMessage, false); 
});

ラジオボタンの入力にid属性を追加し、jQueryのbind（）メソッドを使用しました。 validateTextField（）関数を変更して、テキストフィールドのテキストを取得する必要があるでしょう。

出典

2010-12-31 22:30:56 Marlon

テキストフィールドの値が変更されたとみなされるたびに（つまり、テキストフィールドの値を変更しただけで、テキストフィールドから別のフィールドにユーザーがクリック（またはタブ）する）、JavaScriptが必要です「エラー」スパン内で報告されるエラー。これは、テキストフィールドの "onchange"関数をvalidateTextFieldにバインドすることによって実現されます。テキストフィールドからラジオボタンにタブを移動し、ラジオボタンを「直接」クリックすると、クリックされたボタンをチェック状態のままにしていない間に、ラジオの状態を切り替えるためにスペースバーを押します。 – user559496

私は、この問題がテキストフィールドのonchangeイベントハンドラ内のDOMの突然変異に必ず直接関係していると主張していないことに気づいただけです。私のページ**のラジオボタンをクリックすると**ボタンの周りに点線の四角形のラジオボタンが表示されるという事実は、ブラウザがクリックを認識したことを示していますが、ブラウザーが何をクリックしたかのように見えますDOMの突然変異（およびスプライシングされたメッセージの下にあるすべての関連する再配置）によって部分的に損なわれます。 – user559496

AJAXのようなシナリオでクリックした後にラジオボタンがチェックされていない

答えて

関連する問題