CODEWITHSUNDEEP
javascriptphpjqueryhtml
far1023
far1023

Reputation: 123

Selecting dynamic elements id on loops

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

Answers (3)

Asif Rahaman
Asif Rahaman

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

dale landry
dale landry

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.

enter image description here

Also, if you want to know how many rows you get from DB, use count() in php.

$form_count = count($form);

Upvotes: 0

fercaveri
fercaveri

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

Related Questions