How to get the second value in the id to make onchange function?

I want to get the quantity value on change to show in the input, I make it data-cat_id='{$quantity}’ to show, but it cannot work.This value='{$id_book}’ is cannot change to ‘{$quantity}’, because id_book I want to use other place. Below is my coding:

 <label>Choose Book:<span style="color:red;">&nbsp;*</span></label>
 <select class="form-control" id="publisher" name="publisher" title="publisher">
 <option value="">Please Select</option>
 <?php
 $sql_branch = 'select * from book_lending where status=1 order by id';
 $arr_branch = db_conn_select($sql_branch);
 foreach ($arr_branch as $rs_branch) {
 $quantity           = $rs_branch['quantity'];
 $id_book            = $rs_branch['id'];
 $book_title            = $rs_branch['title'];
 //echo '<option value="' . $rs_branch['id'] . '" data-cat_id='{$quantity}'>' . $rs_branch['title'] . '</option>';
 echo "<option value='{$id_book}' data-cat_id='{$quantity}'>{$book_title}</option>";
 }
 ?>
</select>


<label for="cp1" class="control-label">Book Stock<span style="color:red;">&nbsp;*</span></label>
<input readonly="readonly" type="text" class="form-control" id="editor" name="editor" title="editor" value="" >

<script>
//let cat_id = selectObject.value;
let cat_id = selectObject.selectedOptions[0].getAttribute("data-cat_id");
$(function(){
$(cat_id).change(function(){
var value=$(cat_id).val();
$("#editor").val(value);
})
})
</script>

Below is my output:

Hope someone can guide me how to show data-cat_id value in the input. Thanks.

Answer

I hope I understood correctly that you wish to set the dataset attribute cat_id associated with each option in the text input field when the user changes the dropdown selection?

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title></title>
    </head>
    <body>
        <label>Choose Book:<span style='color:red;'>&nbsp;*</span></label>
        <select class='form-control' id='publisher' name='publisher' title='publisher'>
            <option selected hidden disabled>Please Select
            <?php
                # Un-comment the following
                /*
                $sql_branch = 'select * from book_lending where status=1 order by id';
                $arr_branch = db_conn_select( $sql_branch );
                */

                #to emulate a recordset...Remove this next piece
                $arr_branch=array(
                    ['id'=>1,'quantity'=>2,'title'=>'Top tips'],
                    ['id'=>2,'quantity'=>4,'title'=>'Tip tops'],
                    ['id'=>3,'quantity'=>8,'title'=>'Stop Tip'],
                    ['id'=>5,'quantity'=>16,'title'=>'Pit Stop'],
                );
                #stop

                foreach ( $arr_branch as $rs_branch ) {
                    printf(
                        '<option value="%s" data-cat_id="%s">%s', 
                        $rs_branch['id'], 
                        $rs_branch['quantity'], 
                        $rs_branch['title']
                    );
                }
            ?>
        </select>


        <label for='cp1' class='control-label'>Book Stock<span style='color:red;'>&nbsp;*</span></label>
        <input readonly='readonly' type='text' class='form-control' id='editor' name='editor' title='editor' value='' />

        <script>

            let oSelect=document.querySelector('select[name="publisher"]');
            let oInput=document.querySelector('input[name="editor"]');
                oSelect.addEventListener('change',function(e){
                    oInput.value=this.options[ this.options.selectedIndex ].dataset.cat_id;
                });
        </script>   
    </body>
</html>

let oSelect=document.querySelector('select[name="publisher"]');
let oInput=document.querySelector('input[name="editor"]');
	oSelect.addEventListener('change',function(e){
		oInput.value=this.options[this.options.selectedIndex].dataset.cat_id;
	});

<label>Choose Book:<span style='color:red;'>&nbsp;*</span></label>
<select class='form-control' id='publisher' name='publisher' title='publisher'>
	<option selected hidden disabled>Please Select
	<option value="1" data-cat_id="2">Top tips
	<option value="2" data-cat_id="4">Tip tops
	<option value="3" data-cat_id="8">Stop Tip
	<option value="5" data-cat_id="16">Pit Stop
</select>
<label for='cp1' class='control-label'>Book Stock<span style='color:red;'>&nbsp;*</span></label>
<input readonly='readonly' type='text' class='form-control' id='editor' name='editor' title='editor' value='' />

Advertisement

Answer