Dynamically created form from database and accessing elements with jquery

Question

I have form that is created from database. Form contains radio buttons which are created like this

<label>
  <input type="radio" name="rizici_radio<?php echo $riz_id ?>" 
   value="<?php echo $rizik['riz_vrednost_da']; ?>" >
   <?php echo $rizik['riz_vrednost_da']; ?>
</label>

Name attribute contains rizici_radio and id from database. And every row has pair of radio buttons with values 1 or 0 . So my problem is manipulating changing values of that pair of radio buttons. For example when i select radio button with value 1 it should fill span tag with value of changed radio button. And i have another span where sum of values from all span tags should be displayed.

Grey is span where value of selected radio button should be stored

Answer 1

with jQuery:

$(radiobutton selector here).click(function(){
$(this).next(".greyValueArea").val($(this).val());

})

This should do the trick. just change selectors.

"Selectors i must create from id's. That is my main problem. I must use something like for loop to add id to either name or id" @Thug you can also give them some class that they would be having incommon.

You see: If you make a

$('.button').on("click",function(){
console.log($this)
})

It will console log button class item you clicked and it applies to every button class you have

Answer 2

Using loop might create issue as some times loop counter value and DB ID's might differ. So what you need to do set DB ID to both radio button set like below where i am setting rel-id value to DB Ids

<label><input type="radio" class="promena" rel-id = '2' name="rizici_radio2" value="1" >1</label>

<label><input type="radio" class="promena" checked rel-id = '2' name="rizici_radio2" value="0">0</label>

And use below jquery code

$(".promena").on("change",function(){ // bind a function to the change event

        if( $(this).is(":checked") ){ // check if the radio is checked
            var val = $(this).val(); // retrieve the value
            var id = $(this).attr("rel-id");

            $("#bodovi"+id).val(val); //setting value to respective hidden field
            $("#scores"+id).text(val); // showing selected radio button value in gray area
        }
    });

Hope this helps you.

Answer 3

First of all, I think it would be better to request the table data with an ajax request as json data from server if you need to update the server data later.

Anyway, for getting the clicked row you can also use the following script:

$('.selectionForm').on('change', 'input[type="radio"]',   
    function(event) {
        console.log('changed radio', $(this).attr('name'), $(this).val(),  $(this).parent().find('span'));
        $(this).parent().find('span').text($(this).val());
});

It goes up in the DOM to the parent of the clicked radio button and then with find you're going down again to the span of that row.

It uses event delegation because that's required for dynamically added content from the ajax request. That would be not required for the PHP added content.

Please see the demo below and here at jsfiddle .

 Handlebars.registerHelper('isChecked', function(input, options) { //console.log(input, this); //console.log(this, this.value, input); return this.value === input? 'checked': ''; }); var $out = $('#out'), rowTmpl = $("#row-template").html(), template = Handlebars.compile(rowTmpl); $.ajax({ url: 'http://www.mocky.io/v2/556d9fd9e822500114253f39', jsonp: 'callback', dataType: "jsonp", success: function(response) { console.log(response); $.each(response, function(index, data) { //console.log(data); $out.append(template(data)); }); } }); $('.selectionForm').on('change', 'input[type="radio"]', function(event) { console.log('changed radio', $(this).attr('name'), $(this).val(), $(this).parent().find('span')); $(this).parent().find('span').text($(this).val()); }); //$out.html(JSON.stringify(dataArray)); 

 ul { list-style-type: none; } li { border-bottom: 1px solid gray; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1>form loaded with ajax request:</h1> <p>table generated with javascript</p> <form class="selectionForm"> <ul id="out"></ul> <!--<ul> <li> <input type="radio" name="row0" value="0"/>0 <input type="radio" checked="" name="row0" value="1"/>1 <span class="badge">1</span> </li> <li> <input type="radio" name="row1" value="0"/>0 <input type="radio" checked="" name="row1" value="1"/>1 <span class="badge">1</span> </li> </ul>--> </form> <script id="row-template" type="text/x-handlebars-template"> <li> <input type="radio" value="0" name="row{{id}}" {{isChecked 0 }}/>0 <input type="radio" value="1" name="row{{id}}" {{isChecked 1 }}/>1 <span class="badge">{{value}}</span> </li> </script> <h1>form generated with server side script</h1> <form class="selectionForm"> <ul> <li> <input type="radio" name="row0" value="0"/>0 <input type="radio" checked="" name="row0" value="1"/>1 <span class="badge">1</span> </li> <li> <input type="radio" name="row1" value="0"/>0 <input type="radio" checked="" name="row1" value="1"/>1 <span class="badge">1</span> </li> </ul> </form>