CODEWITHSUNDEEP
htmljsonjqueryweb
ron_meh
ron_meh

Reputation: 93

Dynamically generated Radio button from json data

I am developing an application for selecting the PASS/FAIL option for the value generated from the json data.

My problem is that I am not able to select value per row.The selected value applies in all rows.

HTML:

<table id="records" cellspacing="0">

JQUERY:

(function () {
    var url = "http://www.filltext.com/?callback=?";
    $.getJSON(url, {
        'rows': 5,
            'fname': '{firstName}',
            'lname': '{lastName}',
            'tel': '{phone|format}',
    })
        .done(function (data) {
        $.ajaxSetup({
            cache: false
        });
        var t;
        $.each(data, function (i, item) {
            var html =
                "<td>" + item.fname + "</td>" +
                "<td>" + item.lname + "</td>" +
                "<td>" + item.tel + "</td>" +
                "<td><input type='text' name='PASS' placeholder='" + i + "' /></td>" +
                "<td><input type='radio' value='Pass' name='PASS'/>PASS</td>" +
                "<td><input type='radio' value='Fail' name='PASS'/>FAIL</td>";
            $("<tr/> </table>").html(html).appendTo("#records");

        });
        $('input[name="PASS"]').on('change', function () {

            $('input[type="text"]').val($(this).val());

        });
    });
})();

JSFIDDLE: http://jsfiddle.net/rutvij111/hUAWF/

Upvotes: 1

Views: 7013

Answers (4)

SarathSprakash
SarathSprakash

Reputation: 4624

Working DEMO

Try this,

The problem was since you have specified $('input[type="text"]')it will select all input of type text, so all the textboxes' value will be effected, However the code below gets the corresponding textbox in the same row of the clicked radio button.

$('input[name="PASS"]').on('change', function() {

    $(this).parents('tr').find('input[type="text"]').val($(this).val());

});

Hope this helps, thank you

Upvotes: 0

Juan
Juan

Reputation: 5050

working fiddle

first you need to add the same name only to the two radiobuttons that you want to associate (pass and fail) for each row

something like this:

"<td><input type='radio' value='Pass' name='PASS" + i + "'/>PASS</td>"+
"<td><input type='radio' value='Fail' name='PASS" + i + "'/>FAIL</td>";

then assign the change handler to the radio buttons using the type instead of the name

$('input[type="radio"]').on('change', function() { });

and get to the parent tr and look for the input[type=text] from there

$(this).parent().parent().find('input[type=text]').val($(this).val());

Upvotes: 2

0xFK
0xFK

Reputation: 2718

This is not the optimal solution , but it is working 

    (function() {
    var url = "http://www.filltext.com/?callback=?";
    $.getJSON( url, {
        'rows': 5,
'fname': '{firstName}',
'lname': '{lastName}',
'tel': '{phone|format}',
      })
      .done(function( data ) {
           $.ajaxSetup ({ cache: false});
               var t;
        $.each( data, function( i, item ) {
    var html = 
        "<td>" + item.fname + "</td>" +
        "<td>" + item.lname + "</td>" +
        "<td>" + item.tel + "</td>" +
        "<td><input id="+i+" type='text' name='PASS' placeholder='"+i+"' /></td>" +
        "<td><input id="+i+" type='radio' value='Pass' name='PASS'/>PASS</td>"+
        "<td><input id="+i+" type='radio' value='Fail' name='PASS'/>FAIL</td>";
      $("<tr/> </table>").html(html).appendTo("#records");

});
  $('input[name="PASS"]').on('change', function() {

      var id=  $(this).attr('id');
        $('input[type="text"]#'+id).val($(this).val());

    });
      });
    })();

Upvotes: 0

Francisco Presencia
Francisco Presencia

Reputation: 8861

That's because you assign the same name="PASS" to every radio button. You ought to select a different one for each row. You could number it like name = "PASS1" or so. Demo for recommended method:

http://jsfiddle.net/hUAWF/7/

Alternatively you could only update a single row if it's only for showing the data (and not writing it) by selecting a children of that row:

$('input[name="PASS"]').
  on('change', function() {
    $(this).
      parents("tr").
      find('input[type="text"]').
      val($(this).val());

Demo for easy alternative:

http://jsfiddle.net/hUAWF/4/

Upvotes: 0

Related Questions