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>

JavaScript
​x
 
 <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>

JavaScript
 
<!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;
	});

JavaScript
 
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='' />

JavaScript
 
<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