Radio button unchecked after clicked in AJAX-like scenario

Question

I have a textfield for which change events are bound to a function that validates the textfield's value and may splice a corresponding validation error message into the DOM above the textfield. If the change event is triggered by clicking one of a pair of somewhat unrelated radio buttons, the radio button that is clicked gains the focus but, against my and users' expectations, does not become checked - this is the problem.

Although the validation in the final system will be carried out server-side using AJAX, the following code demonstrates that AJAX has nothing to do with the problem.

Can you tell me what I'm missing here:

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

where is the code that tries to alter the radio button state? I can't see it. — scunliffe, Dec 31 '10 at 22:19
There isn't any such code. If you load the page into a browser and and click one of the radio buttons, the problem is that whether the radio button becomes checked is conditional on you not having first typed something into the textfield. — user559496, Dec 31 '10 at 23:26
Further refinement of problem definition: The problem is that whether the radio button becomes checked is conditional on you not having typed something into the textfield immediately beforehand. — user559496, Dec 31 '10 at 23:37

Marlon · Answer 1 · 2010-12-31T22:59:01.823

0

I'm sorry, I had a bit of trouble following what you are trying to do, but are you trying to do something like this?

<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);
});

I just simply added id attributes to your radio button inputs and used the jQuery bind() method on them. You'll probably want to change the validateTextField() function so that it grabs the text in the text field.

edited Dec 31 '10 at 22:59

answered Dec 31 '10 at 22:30

Marlon

346
4
12

Every time that the value of the textfield is regarded as having changed (i.e. the user clicks (or tabs to) from the textfield to a different field, having just altered the textfield's value), my Javascript is required to cause any textfield value validation error to be reported within the "errors" span. This is achieved such as by binding the textfield's "onchange" function to validateTextField. Tabbing from the textfield to a radio button and pressing spacebar to toggle radio state works fine, whereas "directly" clicking a radio button fails to leave the clicked button in the checked state. – user559496 Dec 31 '10 at 23:52
I've only just realised that I haven't yet asserted that this problem is surely directly associated with the mutation of the DOM within the textfield's onchange event handler. Whereas the fact that clicking a radio button in my page **always** leaves that radio button having the focus (dotted square around the button) shows that the browser has recognised the click, it is as if the browser's determination of WHAT was clicked is partially compromised by the mutation of the DOM (and associated re-positioning of everything underneath the message that was spliced in). – user559496 Jan 01 '11 at 00:10

Radio button unchecked after clicked in AJAX-like scenario

1 Answers1