submitting form values to jquery in multiple rows

Question

I am having a table of students in which I am making a form in each row to save marks of each student through jquery.

Can anybody guide how is it possible? I am unable to pick unique values of students. Here is my code

<?php 
              
              if($row!=''){
                foreach($row as $value){
                ?>
                <tr>
                <form>
                <td><?php echo $value['student_grno'] ?></td>
                <td><?php echo $value['student_name'] ?></td>
                <td><?php echo $value['father_name'] ?></td>
                <td>
                    
                    <div class="form-label-group">
                        <select id="disc_<?php echo $value['student_grno'] ?>" class="form-control opt required " name="disc" >
                            <option value="" selected="selected">Grade</option>
                            <option value="1" >A+</option>
                            <option value="2" >A</option>
                            <option value="3" >B+</option>
                            <option value="4" >B</option>
                            <option value="5" >C</option>
                            <option value="6" >D</option>
                        </select>
                    </div>
                </td>
                <td>
                    <div class="form-label-group">
                        <select id="class_part_<?php echo $value['student_grno'] ?>" class="form-control opt" name="class_part" >
                            <option value="" selected="selected">Grade</option>
                            <option value="1">A+</option>
                            <option value="2">A</option>
                            <option value="3">B+</option>
                            <option value="4">B</option>
                            <option value="5">C</option>
                            <option value="6">D</option>
                        </select>
                    </div>
                </td>
                <td>
                    <div class="form-label-group">
                        <input class="std_marks_<?php echo $value['student_grno'] ?>" type="text" name="marks" class="form-control col-sm-8" placeholder="student marks" />
                
                    </div>
                </td>
                <td>
                    
                    
                        <input type="hidden" name="student_name" value="<?php echo $value['student_name'] ?>"/>
                        <input type="hidden" name="student_id" value="<?php echo $value['student_id'] ?>"/>
                        <input type="hidden" name="class_id" value="<?php echo $value['class_id'] ?>"/>
                        <input id="save_btn_<?php echo $value['student_grno'] ?>" class="btn btn-primary btn-sm" type="submit" value="Save Marks" />
                    </form>  
                
                </td>
                
              </tr>
                  <?php 
                }
              }
                ?>

$(document).ready(function(){
            $('select#exam_term').change(function(){
            
            var exam_term = $('#exam_term option:selected').val();
    
            $('#students_table').show(1000);
                $('#save_btn').click(function(){
                
                    var disc = $('#disc option:selected').val(); //$("#dropdownList option:selected").text();
                    var class_part = $('#class_part option:selected').val();
                    var std_marks = $('#std_marks').val();
                    var teacher_id = <?php echo $this->session->id?>;
                    var student_id = <?php echo $student_id?>;
                    var class_id   = <?php echo $class_id?>;
                    var subject_id = <?php echo $subject_id?>;
                    var form_data = {
                        
                                        disc : disc, //$("#dropdownList option:selected").text();
                                        class_part : class_part,
                                        exam_term  : exam_term,
                                        std_marks  : std_marks,
                                        teacher_id : teacher_id,
                                        student_id : student_id,
                                        class_id   : class_id,
                                        subject_id : subject_id
                            
                            };
                        $.ajax({
                                 type:'post',
                                 url:'<?= base_url()?>index.php/teacher/set_formative_marks',
                                // method: 'post',
                                 data : form_data,
                                 success: function(data){
                                            //$(".message").html(data).fadeIn().delay(4000).fadeOut('slow');
                                            //$(".message").fadeOut(1000);
                                            alert (data);
                                            }
                                
                                     
                                });
                });
        });

I want to save the values of each student in jquery call to a function in controller. Had to make unique ids of each student's grno by adding '' after students_id. Is there any simpler way to do such thing?

Answer 1

Whenever your button gets clicked you can get closest tr from that button using closest method and then using this you can use .find to get all values which you needed.

Demo Code :

$('select#exam_term').change(function() {

  var exam_term = $('#exam_term option:selected').val();

  $('#students_table').show(1000);
})

$('.save').click(function() {
  //get closest tr
  var slector = $(this).closest("tr");
  //find values using name attribute
  var disc = slector.find("select[name='disc']").val()
  console.log(disc)
  var class_part = slector.find("select[name='class_part']").val()
  var std_marks = slector.find('input[name=marks]').val();
  var teacher_id = "<?php echo $this->session->id?>";
  var student_id = slector.find('input[name=student_id]').val();
  var class_id = slector.find('input[name=class_id]').val();
  // var subject_id =  slector.find('input[name=subject_id]').val();
  var exam_term = "somedemodata";
  var form_data = {
    disc: disc,
    class_part: class_part,
    exam_term: exam_term,
    std_marks: std_marks,
    teacher_id: teacher_id,
    student_id: student_id,
    class_id: class_id,
    // subject_id: subject_id

  };

  console.log(form_data)
  //yourajax call

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>

    <td>
      12
    </td>
    <td>
      something
    </td>
    <td>
      abc
    </td>
    <td>

      <div class="form-label-group">
        <select id="disc_<?php echo $value['student_grno'] ?>" class="form-control opt required " name="disc">
          <option value="" selected="selected">Grade</option>
          <option value="1">A+</option>
          <option value="2">A</option>
          <option value="3">B+</option>
          <option value="4">B</option>
          <option value="5">C</option>
          <option value="6">D</option>
        </select>
      </div>
    </td>
    <td>
      <div class="form-label-group">
        <select id="class_part_<?php echo $value['student_grno'] ?>" class="form-control opt" name="class_part">
          <option value="" selected="selected">Grade</option>
          <option value="1">A+</option>
          <option value="2">A</option>
          <option value="3">B+</option>
          <option value="4">B</option>
          <option value="5">C</option>
          <option value="6">D</option>
        </select>
      </div>
    </td>
    <td>
      <div class="form-label-group">
        <input class="std_marks_<?php echo $value['student_grno'] ?>" type="text" name="marks" class="form-control col-sm-8" placeholder="student marks" />

      </div>
    </td>
    <td>


      <input type="hidden" name="student_name" value="something" />
      <input type="hidden" name="student_id" value="12" />
      <input type="hidden" name="class_id" value="15" />
      <!--added class save and remove input type submit-->
      <input id="save_btn_<?php echo $value['student_grno'] ?>" class="btn btn-primary btn-sm save" type="button" value="Save Marks" />


    </td>

  </tr>
  <tr>

    <td>
      13
    </td>
    <td>
      something1
    </td>
    <td>
      abcd
    </td>
    <td>

      <div class="form-label-group">
        <select id="disc_<?php echo $value['student_grno'] ?>" class="form-control opt required " name="disc">
          <option value="" selected="selected">Grade</option>
          <option value="1">A+</option>
          <option value="2">A</option>
          <option value="3">B+</option>
          <option value="4">B</option>
          <option value="5">C</option>
          <option value="6">D</option>
        </select>
      </div>
    </td>
    <td>
      <div class="form-label-group">
        <select id="class_part_<?php echo $value['student_grno'] ?>" class="form-control opt" name="class_part">
          <option value="" selected="selected">Grade</option>
          <option value="1">A+</option>
          <option value="2">A</option>
          <option value="3">B+</option>
          <option value="4">B</option>
          <option value="5">C</option>
          <option value="6">D</option>
        </select>
      </div>
    </td>
    <td>
      <div class="form-label-group">
        <input class="std_marks_<?php echo $value['student_grno'] ?>" type="text" name="marks" class="form-control col-sm-8" placeholder="student marks" />

      </div>
    </td>
    <td>


      <input type="hidden" name="student_name" value="something1" />
      <input type="hidden" name="student_id" value="13" />
      <input type="hidden" name="class_id" value="15" />
      <input id="save_btn_<?php echo $value['student_grno'] ?>" class="btn btn-primary btn-sm save" type="button" value="Save Marks" />


    </td>

  </tr>
</table>