Question

I have the following MySQL table:

|  id   |    Title    |  Windows | Linux | IDE | GUI | RAD |
------------------------------------------------------------
|   1   |  Software_1 |     1    |   0   |  1  |  0  |  0  |
------------------------------------------------------------
|   2   |  Software_2 |     0    |   1   |  0  |  1  |  0  |

I would like to populate a form by querying the mySQL db. Up to now I’m able to populate input fields, textareas and checkboxes but I’m absolutely stuck on populating radiobuttons. Please note that mySQL stores boolean values for: checkboxes (Windows, Linux)
and radiobuttons (IDE, GUI, RAD)

This is the PHP part that retrieves the data from the dB and converts it to JSON:

while($review = mysql_fetch_array($qry)) {
    $arr = array('id_field' => $review['id'],
                'title' => $review['title'],
                'homepage' => $review['link_homepage'],
                'windows' => $review['Windows'] == "1",
                'linux' => $review['Linux'] == "1",
                'ide' => $review['IDE'] == "1",
                'gui' => $review['GUI'] == "1",
                'rad' => $review['RAD'] == "1"
    );
    echo json_encode($arr);
} 

This is the form:

<form name="form" id="edit_review" method ="post" action="review.php">  
    Language name: <input type="text" size="34" value="" name="title"/>
    Windows <input type="checkbox" name="windows" />
    Linux <input type="checkbox" name="linux" />

    IDE <input type="radio" name="environment" id="ide" value="ide"/>
    GUI <input type="radio" name="environment" id="gui" value="gui"/>
    RAD <input type="radio" name="environment" id="rad" value="rad"/>
</form>

This is the jQuery code:

$(".editlink").click(function() {
    $.get("lists.php", {param2: $(this).attr('id')}, 
        function(data) {
            jsonOBJ = jQuery.parseJSON(data);
            for (var key in jsonOBJ) {
                $(":input[name='" + key + "']").val(jsonOBJ[key]);
                $(":input[name='" + key + "']").attr("checked", jsonOBJ[key]);
            }
        }   
    );    
    return false;
 });

The string:

$(":input[name='" + key + "']").attr("checked", jsonOBJ[key]);

works only for checkboxes. Radiobuttons ‘name’ is ‘environment’ and must be the same for all the three radiobuttons. So, of course the above line is not working. I tried changing it to:

$(":input[id='" + key + "']").attr("checked", jsonOBJ[key]);

and I added ‘id‘ to the radiobuttons as follows:

IDE <input type="radio" name="environment" id="ide" value="ide"/>

and I noticed (using ‘alert’) that the correct checkbox is checked but as soon as the LOOP continues is immediately unchecked. Why radiobuttons are unchecked and checkboxes are not? How can I fix it?

Answer 1

It depends on the version of jquery you are using. Please look at: How to reset radiobuttons in jQuery so that none is checked for your answer.