CODEWITHSUNDEEP
phpjavascriptjqueryajaxjson
Zac
Zac

Reputation: 12836

Select radio buttons based on json response

Can I get some ideas or an example of how I could populate the checked state of radio buttons depening on data loaded from the database?

For example I am generating an array from a SELECT query that looks like:

array(
[0] => array(    
    ['note_id'] => 1
    ['value'] => 'no'
  )
[1] => array(
    ['note_id'] => 4
    ['value'] => 'yes'
  )
[2] => array(   
    ['note_id'] => 5
    ['value'] => 'yes'
  )
)

The checkbox groups look like :

<input type="radio" name="1" value="yes">
<input type="radio" name="1" value="no"> 
<input type="radio" name="1" value="done">

<input type="radio" name="2" value="yes">
<input type="radio" name="2" value="no"> 
<input type="radio" name="2" value="done">

Now using json_encode I put the data array of results into :

[{"note_id":"1","value":"no"},{"note_id":"4","value":"yes"},{"note_id":"5","value":"yes"}]

I am passing these results back through ajax.. something like ? :

$j.ajax({
    url: readurl,
    type: "GET",
    data: 'sku=' + thisSku,
    dataType: "json",
    success: function (data){
        // ? now what
    }       
});

Can someone help me understand how I now could take the json data to select the appropriate choices? How would I create the loop that runs the check if note_id matches the input [name] attribute and if so check the button with the appropriate value? Is json even the best way to handle this? Should I be using .getJSON()?

Upvotes: 3

Views: 3270

Answers (4)

Jorge Olivares
Jorge Olivares

Reputation: 1492

Try something like this:

$j.ajax({
    url: readurl,
    type: "GET",
    data: 'sku=' + thisSku,
    dataType: "json",
    success: function (data){
        $.each(data, function(i, item) {
            alert("note_id: " + item.note_id + ", value: " + item.value);
        });
    }       
});

You hace to replace de alerts with your code.

Greatings.

Upvotes: 0

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

Inside the success callback you can simply iterate over data which should be [{"note_id":"1","value":"no"},{"note_id":"4","value":"yes"},{"note_id":"5","value":"yes"}].

DEMO

$.each (data, function (i, obj) {
    $(':radio[name=' + obj.note_id + '][value=' + obj.value + ']').prop('checked', true);
});

Upvotes: 6

chepe263
chepe263

Reputation: 2812

Create a $.each() loop on the json object and then compare the note_id with the name value and add a property

var notas = [{"note_id":"1","value":"no"},{"note_id":"4","value":"yes"},{"note_id":"5","value":"yes"}];


$.each(notas,function(i, v){
    $('input[type=radio][name=' + this.note_id + ']').prop('checked','true');

});
​

http://jsfiddle.net/chepe263/wLDHk/

Upvotes: 2

Arthur Neves
Arthur Neves

Reputation: 12138

var data = {"nodes": [{"note_id":"1","value":"no"},{"note_id":"4","value":"yes"},{"note_id":"5","value":"yes"}] }

$('input:radio').attr('checked','')
$.each(data.nodes,function(a,b){
  $("input[name="+b.note_id+"][value="+b.value+"]:radio").attr('checked','checked')

} )

Maybe something like that would work for you...

Upvotes: 2

Related Questions