How to make the option value include more than 1 value? - php

Question

I have a problem to show the 4 different data in the input fields. I have create the onchange function to get the 1 value in the input field, but how to get other different data to show in the other fields:
Below is my coding:
<div class="form-group">
<label for="cp1" class="control-label col-lg-4">Move to Sub Folder/New Category<span style="color:red;"> *</span></label>
<div class="col-lg-3">
<select onchange="getComboA(this)" class="form-control blank" id="parentid" name="parentid" title="parentid">
<option>Please Select</option>
<option value="New Category_value">New Category</option>
<?php
$sql_incharge = 'select * from filing_code_management where status=1 order by id';
$arr_incharge = db_conn_select($sql_incharge);
foreach ($arr_incharge as $rs_incharge) {
$folder_location = $rs_incharge['folder_location'];
$function_code_select = $rs_incharge['function_code'];
$function_name_select = $rs_incharge['function_name']
$activity_code_select = $rs_incharge['activity_code']
$activity_name_select = $rs_incharge['activity_name']
echo '<option value="' . $rs_incharge['function_code'] . '">' . $rs_incharge['name'] . '</option>';
}
?>
</select>
<!--<input type="text" class="form-control blank" id="parentid" name="parentid" title="parentid" onblur="capitalize(this.id, this.value);">-->
</div>
</div>
<div class="form-group">
<label for="cp1" class="control-label col-lg-4">Function Code:</label>
<div class="col-lg-3">
<input type="text" class="form-control" id="function_code" name="function_code" title="function_code" value="">
</div>
</div>
<div class="form-group">
<label for="cp1" class="control-label col-lg-4">Function Name:</label>
<div class="col-lg-3">
<input type="text" class="form-control" id="function_name" name="function_name" title="function_name">
</div>
</div>
<div class="form-group">
<label for="cp1" class="control-label col-lg-4">Activity Code:</label>
<div class="col-lg-3">
<input type="text" class="form-control" id="activity_code" name="activity_code" title="activity_code">
</div>
</div>
<div class="form-group">
<label for="cp1" class="control-label col-lg-4">Activity Name:</label>
<div class="col-lg-3">
<input type="text" class="form-control" id="activity_name" name="activity_name" title="activity_name">
</div>
</div>
<script>
function getComboA(selectObject) {
var value = selectObject.value;
document.getElementById("function_code").value =value;
document.getElementById("function_name").value =value;
document.getElementById("activity_code").value =value;
document.getElementById("activity_name").value =value;
}
<script>
Now my output show me the 4 same data in the input fields, like below the picture:
Output 1
Actually I want to show the 4 different data, now I just grab the first data using this code $rs_incharge['function_code'], how let these $rs_incharge['function_name'], $rs_incharge['activity_code']$rs_incharge['activity_name'] can show the different field, hope someone can guide me solve this problem. Thanks.

Answer 1

You should store the data in additional attributes in the <option> itself then get the values onchange and then perform your operation. This should help you.
<select onchange="getComboA(this)" class="form-control blank" id="parentid" name="parentid" title="parentid">
<option selected disabled>Please Select</option>
<!--Make this selected by default-->
<option value="New Category_value" data-act_code="Your-default-act-code" data-act_name="Your-default-act-name">New Category</option
<?php
$sql_incharge = 'select * from filing_code_management where status=1 order by id';
$arr_incharge = db_conn_select($sql_incharge);
foreach ($arr_incharge as $rs_incharge) {
$folder_location = $rs_incharge['folder_location'];
$function_code_select = $rs_incharge['function_code'];
$function_name_select = $rs_incharge['function_name']
$activity_code_select = $rs_incharge['activity_code']
$activity_name_select = $rs_incharge['activity_name']
// save the data here↓↓ in data attributes
echo "<option value='{$function_code_select}' data-act_code='{$activity_code_select}' data-act_name='{$activity_name_select}'>{$function_name_select}</option>";
}
?>
</select>
Then in your script
<script>
function getComboA(selectObject) {
let func_code = selectObject.value; // get the value of selected option
let func_name = selectObject.selectedOptions[0].textContent; // get the text of selected option
let act_code = selectObject.selectedOptions[0].getAttribute("data-act_code"); // get attribute of selected option
let act_name = selectObject.selectedOptions[0].getAttribute("data-act_name"); // get attribute of selected option
document.getElementById("function_code").value = func_code;
document.getElementById("function_name").value = func_name;
document.getElementById("activity_code").value = act_code;
document.getElementById("activity_name").value = act_name;
}
</script>
Below is the quick demo of what I am talking about-
function getComboA(selectObject) {
let func_code = selectObject.value; // get the value of selected option
let func_name = selectObject.selectedOptions[0].textContent; // get the text of selected option
let act_code = selectObject.selectedOptions[0].getAttribute("data-act_code"); // get attribute of selected option
let act_name = selectObject.selectedOptions[0].getAttribute("data-act_name"); // get attribute of selected option
document.getElementById("function_code").value = func_code;
document.getElementById("function_name").value = func_name;
document.getElementById("activity_code").value = act_code;
document.getElementById("activity_name").value = act_name;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<select onchange="getComboA(this)" class="form-control blank" id="parentid" name="parentid" title="parentid">
<option selected disabled>Please Select</option>
<!--Make this selected by default-->
<option value="New Category_value" data-act_code="Your-default-act-code" data-act_name="Your-default-act-name">New Category</option>
<!-- Provide default values here -->
<!-- After giving values via PHP your HTML code should look like this-->
<option value='Function Code 1' data-act_code='Activity Code 1' data-act_name='Activity Name 1'>Function Name 1</option>
<option value='Function Code 2' data-act_code='Activity Code 2' data-act_name='Activity Name 2'>Function Name 2</option>
<option value='Function Code 3' data-act_code='Activity Code 3' data-act_name='Activity Name 3'>Function Name 3</option>
</select>
Function Code: <input type="text" class="form-control" id="function_code" name="function_code" title="function_code" /><br>
Function Name: <input type="text" class="form-control" id="function_name" name="function_name" title="function_name" /><br>
Activity Code: <input type="text" class="form-control" id="activity_code" name="activity_code" title="activity_code" /><br>
Activity Name: <input type="text" class="form-control" id="activity_name" name="activity_name" title="activity_name" />