Databases
StackOverflow2013
Postsdbo
PORadio button unchecked after clicked in AJAX-like scenario
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PORadio button unchecked after clicked in AJAX-like scenario
    text
    copied!<p>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.</p> <p>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.</p> <p>Many thanks if you can tell me what I'm missing here:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;STYLE type="text/css"&gt; .highlighted { color: red; } &lt;/STYLE&gt; &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;span id="errors"&gt; &lt;/span&gt; &lt;label for="mytextfield"&gt;First, type something in this textfield&lt;/&gt; &lt;input type="text" id="mytextfield" name="mytextfield"/&gt; &lt;p&gt;Second, click on one of these radio buttons&lt;/&gt; &lt;INPUT TYPE="radio" NAME="binaryquestion" VALUE="Y" &gt;Yes&lt;/&gt; &lt;INPUT TYPE="radio" NAME="binaryquestion" VALUE="N" &gt;No&lt;/&gt; &lt;script type="text/javascript"&gt; $(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("&lt;p&gt;Thank you for your input!&lt;/p&gt;").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!"); }; &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload