Reputation: 123
I am new to js and jquery and need some helps. I have data that return from database by php like :
foreach ($form as $value) {
$input = '<input type="number" id="tbpersentase'.$i.'" min="0" max="100" value="'.$value->persentase.'" title="Progres">';
$inputdnone = '<input type="number" id="persentase'.$i.'" min="0" max="100" value="'.$value->persentase.'">'; //this input should not appear in view
$i++;
}
$row = '<input type="number" id="formJum" value="'.$i.'">';
the html result I want may like this:
<input id="tbpersentase0" value="myVal">
<input id="persentase0" value="myVal">
<input id="tbpersentase1" value="myVals">
<input id="persentase1" value="myVals">
...
// and so on as many as the data retrieve from db
<input id="formJum" value="rowCount">
In my project it needs to be when input with id='"tbpersentase"$i'
value has been change by user, then the input with id='"persentase"$i'
value change to whatever id='"tbpersentase"$i'
value is.
I use some code like this :
var formJum = $('#formJum').val();
for(i=0; i<formJum; i++){
$('#tbpersentase'+i).change(function(){
var tbpersentase = $(this).val();
$('#persentase'+i).val(tbpersentase);
})
}
the browser is not giving any errors to me, so I think my code is done. But when I change the value of input with id='"tbpersentase"$i'
the element id='"persentase"$i'
value with the same i
doesn't change.
My whole element code look like this :
<div class="col-sm-7 px-0 reportsForApps d-none">
<div class="px-3">
<table class="table dttables" id="dtForm"> // data-tables client side processing
<thead class="d-none">
<tr>
<th class="d-none">-</th>
<th class="d-none">-</th>
</tr>
</thead>
<tbody id="inputform">
// #tbpersentase goes here for user input ..
</tbody>
</table>
<div id=""> // this doesnt appear to user page
<input type="number" id="formJum" value="">
</div>
<div id="inputProgres"> // this doesnt appear to user page
// #persentase goes here ..
</div>
</div>
</div>
All the value and element set by ajax. Any idea what I have to do with my code? thank you
Upvotes: 2
Views: 1966
Reputation: 775
You can use class
as selector as this can be same for multiple element. Use jQuery data
to store index.
$i=0;
foreach ($form as $value) {
$input = '<input type="number" class="percentage" data-index="'.$i.'" value="'.$value->persentase.'" min="0" max="100" title="Progres">';
$inputdnone = '<input type="number" id="persentase'.$i.'" min="0" max="100" value="'.$value->persentase.'">'; //this input should not appear in view
$i++;
}
In jQuery Part, no need to use loop just write change function for percentage
class. This will be triggered whenever a value of an input is changed:
$(".reportsForApps").on("change", ".percentage", function(){ // 'parentElementId' should be replaced with actual parent element id.
var tbpersentase = $(this).val();
var index = $(this).data("index");
$('#persentase'+index).val(tbpersentase);
});
Upvotes: 1
Reputation: 8610
Add a data-type attr data-group="tbpersentase"
and call on it in your function
$input = null;
$inputdnone = null;
foreach ($form as $key => $value) { // you could also use $key value for increment
$input .= '<input type="number" data-group="tbpersentase" id="tbpersentase'.$key.'" min="0" max="100" value="'.$value.'" title="Progres">';
$inputdnone .= '<input type="hidden" id="persentase'.$key.'" min="0" max="100" value="'.$value.'">'; //this input should not appear in view
}
// place in html to echo results of dynamically created inputs from DB info
<?=$input?>
<?=$inputdnone?>
// JQuery 3.4.1
$( "input[data-group='tbpersentase']" ).change(function() {
var $this = $(this).val(); // get users value of the changing input field
var tbpersentaseID = $(this).attr('id'); // get the changing input fields ID so we can remove IDs alpha chars
var getID = tbpersentaseID.replace(/[^0-9]/g,''); // declare a new variable containing the numbers for the selected ID
var persentaseID = 'persentase' + getID; // Concatenate desired alpha ID name to selected key value
$("#"+persentaseID).val($this); // set value
});
Tested in chrome and changes value of #persentase
to the value entered in #tbpersentase
yet retains original ID in #persentase
. Hope this is what you were looking to achieve.
Also, if you want to know how many rows you get from DB, use count()
in php.
$form_count = count($form);
Upvotes: 0
Reputation: 63
You have to execute that code on every #formJum value change using the change() function.
Also would be better if you dispose properly those event handlers in every input change.
Upvotes: 0