Applying blur function (Jquery) on textboxes generated dynamically-CodePudding

The Following Code will generate textboxes according to subjects offered. Three Textboxes (Total Marks,Marks, Grades) for each subject.

if(isset($_POST["id"]) && isset($_POST["sid"]))
{
$cid = $_POST["id"]; 
$sid = $_POST["sid"];
$query ="SELECT sb.subject_id,sb.subject_name FROM tblsoffered so join tblsession s on so.session_id=s.session_id join tblclass c on so.class_id = c.class_id join tblsubjects sb on so.subject_id = sb.subject_id where so.class_id =$cid and so.session_id=$sid ORDER by sb.subject_name";
$result = mysqli_query($con,$query);
if(mysqli_num_rows($result)>0)
{
$c=1;
while($row = mysqli_fetch_row($result))
    { 
echo htmlentities($row[1]); ?>
<table border="1"><tr><th>Total Marks</th><th>Obtained</th><th>Grade</th></tr>
<tr>
<td><input type="number"  name="totmarks[]" value="" ></td>
<td><input type="number"  name="marks[]" value="" id="marks_<?php echo $c; ?>"></td>
<td><input type="text"  name="grades[]" value=""  id="grades_<?php echo $c; ?>"></td>
</tr>
</table>

<?php
$c  ;
}
}

Jquery Code: The following code will populate the textbox "grade" against marks entered:

$(document).on('blur', "#marks_", function(){
var id = $("#marks_").val();
$.ajax({
url:"getgrade.php",
type:"POST",
data:'id=' id,
dataType:"json",
cache:false,
success: function(data){ 
 $("#grades_").val(data[0]);
 }
}); 
});

My Question is how to apply above jquery code for each subject as i am unable to get (id=marks_1,marks_2,marks_3) on blur function simultaneoulsy. If i enter marks for first subject then grade of first subject should be populated and so on.

CodePudding user response：

$(document).on('blur', "[id^=marks_]", function() {
  var id = $(this).val();
  console.log(id);
  // Your Ajax call or what ever other code
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" name="marks[]" value="" id="marks_1" />
<input type="number" name="marks[]" value="" id="marks_2" />

$(document).on('blur', "[id^=marks_]", function() {
  var id = $(this).val();
  console.log(id);
  // Your Ajax call or what ever other code
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" name="marks[]" value="" id="marks_1" />
<input type="number" name="marks[]" value="" id="marks_2" />

$(document).on('blur', "[id^=marks_]", function() {
  var id = $(this).val();
  console.log(id);
  // Your Ajax call or what ever other code
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" name="marks[]" value="" id="marks_1" />
<input type="number" name="marks[]" value="" id="marks_2" />

I tried this code but typing marks in any "marks' textbox" will make change in every grade's textbox. However, I want to populate respective grade textbox only.

$(document).on('blur', "[id^=marks_]", function(){
    var id = $(this).val();
$.ajax({
url:"getgrade.php",
type:"POST",
data:'id=' id,
dataType:"json",
cache:false,
success: function(data){ 
 $("[id^=grades_]").val(data[0]);
 }
}); // closing ajax
        
    });

CodePudding user response：

Use wild card on input id. With this you can get desire value of textbox.

Example:

$(document).on('blur', "[id^=marks_]", function() {
  var id = $(this).val();
  console.log(id);
  // Your Ajax call or what ever other code
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" name="marks[]" value="" id="marks_1" />
<input type="number" name="marks[]" value="" id="marks_2" />

Inside ajax call you catch particular input like below:

$(document).on('blur', "[id^=marks_]", function() {
  var id = $(this).val();
  console.log(id);
  // Your Ajax call or what ever other code
  var _this = $(this);
  $.ajax({
    url: "getgrade.php",
    type: "POST",
    data: 'id='   id,
    dataType: "json",
    cache: false,
    success: function(data) {
    _this.val(data[0]);
    }
  });

});