Dennis Dennis - 5 months ago 12
Javascript Question

Setting radio group from json

I have 2 radio groups in a modal form.. I am having a difficult time figuring out how to set the value for each group from a json string.. The last 2 values in the json string is "role" and "activated". Activate is either 1 for Yes or 0 for now. Role is either 1, 2 or 3 for Admin, Staff or User. I loop thru the json string and assign the values to field names since they are all identical in the html.

My html is:

<div class="form-field bt-space10">
<div class="clear">
<h4 class="fl-space2 ln-22 size-120" style="color:#777777; font-size: 12px; font-weight: normal;">Authorization Role: </h4>

<div class="form-radio-item clear fl-space2">
<input type="radio" rel="radiogroup" name="role" id="Admin" value="1" class="radio fl-space" /> <label for="Admin" class="fl">Admin</label>
</div>

<div class="form-radio-item clear fl-space2">
<input type="radio" rel="radiogroup" name="role" id="Staff" value="2" class="radio fl-space" /> <label for="Staff" class="fl">Staff</label>
</div>

<div class="form-radio-item clear fl-space2">
<input type="radio" rel="radiogroup" name="role" id="User" value="3" class="radio fl-space" /> <label for="User" class="fl">User</label>
</div>
</div>
<div class="clear">
<h4 class="fl-space2 ln-22 size-120" style="color:#777777; font-size: 12px; font-weight: normal;">Account Activated: </h4>

<div class="form-radio-item clear fl-space2">
<input type="radio" rel="radiogroup1" name="activated" id="Yes" class="radio fl-space" /> <label for="radio4" class="fl">Yes</label>
</div>

<div class="form-radio-item clear fl-space2">
<input type="radio" rel="radiogroup1" name="activated" id="No" class="radio fl-space" /> <label for="radio5" class="fl">No</label>
</div>
</div>

</div><!-- /.form-field-->


My incoming json string (if needed, I could change the return to "Role":"Admin", etc.. and "activated":"Yes", etc.):

{"op": "UPDATE", "id": "7","email": "joe@public.com","name": "Joe Public","address": "123 Any Street","city": "AnyTown","zipcode": "12345","state": "PA","contact_name": "","phone": "8885551212","fax": "","company_branch": "","company_name": "","activated": "1","role": "1" }


The code I use to populate other fields on the form:

function editUser(rowID, callback) {
var ret;
jQuery.fancybox({
modal : true,
padding : 0,
cache : false,
overlayOpacity : 0.5,
href : "userEdit.html",
onComplete : function() {
InitProfileMenu()
var tsTimeStamp= new Date().getTime();
$.getJSON("includes/GetUserDetails.php?tsTimeStamp&id=" + rowID,
function(data) {
$.each(data, function(i, item) {
$('#' + i).val(item);
});
})
jQuery("#editUser_cancel").click(function() {
ret = false;
jQuery.fancybox.close();
})
jQuery("#editUser_ok").click(function() {
jQuery.fancybox.close();
ret = true;
})
},


I have googled this to death and not finding a solution. Anyone have any ideas? or a resource they can point me to which would help figure this out?

Thanks!
Dennis

Answer

This is difficult to resolve in a generic way for all values in your JSON string because the html attribues are not like one another. I suggest two changes:

  1. Add a value attribute to the radio inputs named "activated"
  2. For each element of JSON data: check the type of form input, if radio, use name and value attribute selectors to check the correct one.

     var myJsonData = {
        "op": "UPDATE",
         "id": "7",
        "email": "joe@public.com",
        "name": "Dennis Megarry",
        "address": "123 Any Street",
        "city": "AnyTown",
        "zipcode": "12345",
        "state": "PA",
        "contact_name": "",
        "phone": "8885551212",
        "fax": "",
        "company_branch": "",
        "company_name": "",
        "activated": "1",
        "role": "1"
    };
    
    function updateFormWithJson(dataObj) {
        $.each(dataObj,function(i,item){
            if($('input[name="' + i + '"]:first').attr("type") == "radio"){
                $('input[name="' + i + '"][value="' + item + '"]').attr("checked","checked");
            }
        });
    };
    
    $(document).ready(function() {
        updateFormWithJson(myJsonData);
    });
    
    <div class="form-field bt-space10">
        <div class="clear">
        <h4 class="fl-space2 ln-22 size-120" style="color:#777777; font-size: 12px; font-weight: normal;">Authorization Role: </h4>
    
        <div class="form-radio-item clear fl-space2">
            <input type="radio" rel="radiogroup" name="role" id="Admin" value="1" class="radio fl-space" /> <label for="Admin" class="fl">Admin</label>
        </div>
    
        <div class="form-radio-item clear fl-space2">
            <input type="radio" rel="radiogroup" name="role" id="Staff" value="2" class="radio fl-space" /> <label for="Staff" class="fl">Staff</label>
        </div>  
    
        <div class="form-radio-item clear fl-space2">
            <input type="radio" rel="radiogroup" name="role" id="User" value="3" class="radio fl-space" /> <label for="User" class="fl">User</label>
        </div>
        </div>
        <div class="clear">
        <h4 class="fl-space2 ln-22 size-120" style="color:#777777; font-size: 12px; font-weight: normal;">Account Activated: </h4>
    
        <div class="form-radio-item clear fl-space2">
            <input type="radio" rel="radiogroup1" name="activated" id="Yes" value="1" class="radio fl-space" /> <label for="radio4" class="fl">Yes</label>
        </div>
    
        <div class="form-radio-item clear fl-space2">
            <input type="radio" rel="radiogroup1" name="activated" id="No" value="0" class="radio fl-space" /> <label for="radio5" class="fl">No</label>
        </div>  
    </div>