The scenario is like I am fetching data from database and populating it as a Table, which is fine and it is getting populated properly. The second thing is that I have an Add button in every row and when user clicks on that button the hidden input values should pass to js function.

All values are getting passed properly but the value of dropdown field (select) sends the value of first row and changes to the dropdown is working only for first row and other rows dropdown values are just blank.

I think this is due to the id which is defined as hidden_spec for all the rows and it is not unique.

I tried dynamic name such as concatenating id with some values like courseId from db but it shows different error like Uncaught TypeError: Cannot set properties of null (setting 'value') at HTMLSelectElement.onchange ((index):1:50)

Following is the Html code:

<form action="helper/addTOPlan.php" method="POST">
    <tr id="<?php echo $course->id; ?>">
        <td >
            <div >
                <img src="<?php echo get_template_directory_uri() . $course->image ?>"  alt="">
                <div >
                    <a href="#" ><?php echo $course->name; ?></a>
                    <small>
                        <span ><?php echo  $course->credit_points; ?> CP</span> &nbsp;
                        <span > <?php echo  $dbUtil->getSemester($course->semester_id)[0]->name; ?></span>&nbsp;
                        <span ><a href="<?php echo  $course->modhb_link; ?>" >Go to Module Handbook</a></span>
                    </small>
                </div>
            </div>
        </td>
        <td >
            <div >
                <select name="specialization" id="specialization" onchange="document.getElementById('hidden_spec').value=this.value">>
                    <option value="0">Select</option>
                    <option value="spec1">Specialization 1</option>
                    <option value="spec2">Specialization 2</option>
                    <option value="supp">Supplementary Section</option>
                </select>
            </div>
        </td>
        <td ><input type="text"  name="semester" id="semester" value="23">
            <!-- <td ><a href="#" onclick="toggleNav()" id="addCourse">Add</a></td> -->
            <input  type="hidden" name="hidden_course_name" id="hidden_course_name" value="<?php echo $course->name; ?>" />
            <input  type="hidden" name="hidden_course_CP" id="hidden_course_CP" value="<?php echo $course->credit_points; ?>" />
            <input  type="hidden" name="hidden_course_offerredIn" id="hidden_course_offerredIn" value="<?php echo $dbUtil->getSemester($course->semester_id)[0]->name; ?>" />
            <input  type="hidden" name="hidden_specialization" id="hidden_spec" value="" />
        </td>
        <td ><button type="submit" onclick=addToPlan(this.id) id="<?php echo $course->id; ?>">
                Add
            </button>
        </td>
    </tr>
</form>

Following is the js function:

function addToPlan(id) {
  var $semester = $("."   id).closest("td").siblings("td").find("."   newCourse.semester).val();
  var $courseName = $("."   id).closest("td").siblings("td").find("."   newCourse.courseName).val();
  var $courseCP = $("."   id).closest("td").siblings("td").find("."   newCourse.creditPoint).val();
  var $courseOfferIn = $("."   id).closest("td").siblings("td").find("."   newCourse.courseOfferIn).val();
  var $specialization = $("."   id).closest("td").siblings("td").find("."   newCourse.specialization).val();

  console.log("semester : "   JSON.stringify($semester));
  console.log("courseName : "   JSON.stringify($courseName));
  console.log("courseCP : "   JSON.stringify($courseCP));
  console.log("courseOfferIn : "   JSON.stringify($courseOfferIn));
  console.log("specialization: "   JSON.stringify($specialization));
}

Following is the output for the first row (correct):

semester : "23"
courseName : "Collaborative \nIntelligence"
courseCP : "4"
courseOfferIn : "Summer"
specialization: "spec1"

Following is the output for other rows:

semester : "12"
courseName : "3D Computer \nVision"
courseCP : "4"
courseOfferIn : "Summer"
specialization: ""

Every data is being passed correctly except the specialization which is just empty for other rows except the first row.

Could somebody please help me in explaining how could I achieve this?

CodePudding user response：

The ID hidden_spec is not unique, you can't use that to update the hidden input.

Use the class instead, along with DOM navigation relative to the element being changed

onchange="this.closest('tr').querySelector('specialization').value = this.value"