Having trouble with the javascript onchange event listener in cakephp3.7. I've got an e-commerce web app running smoothly on cakephp3.7. Now, I want to improve the sales submission form by dynamically loading extra fields based on the product category chosen by the seller. If the seller selects "electronic" from the category input field, then the electronic extra fields, which were previously hidden with CSS, will be displayed. The electronic extra fields with id=elctronic include:

<div id="electronic">
<?php echo $this->Form->control('subcategorie',['label'=>'choose sub category', 'class'=>'form-control', 'option'=>['Computer','Phone','Multimedia'],'empty'=>'choose'); ?>
<?php echo $this->Form->control('brand',['class'=>'form-control', 'placeholder'=>'the brand']); ?>
<?php echo $this->Form->control('model',['class'=>'form-control', 'placeholder'=>'the model']); ?>
</div>

On the other hand, if the product is related to "clothes", the electronic input fields will be hidden and the clothes extra fields will be displayed with id=clothe as follows:

<div id="clothe">
<?php echo $this->Form->control('Gender',['label'=>'What gender?', 'class'=>'form-control', 'option'=>['Males','Females'],'empty'=>'choose'); ?>
<?php echo $this->Form->control('Size',['class'=>'form-control', 'placeholder'=>'Size']); ?>
<?php echo $this->Form->control('model',['class'=>'form-control', 'placeholder'=>'the model']); ?>
</div>

The category input field implements the onchange event listener which should trigger the javascript function extraForm(), but it's not working as expected:

<?php echo $this->Form->control('category',['id'=>'categ','label'=>'choose category', 'class'=>'form-control', 'options'=>['electronics','clothes'],'empty'=>'choose'),'onchange'=>'extraForm("categ"); ?>

Furthermore, in the layout for the method add() of ProductsController, the extraForm() function is defined as below:

<script>
function extraForm(s1){
 var s1=documentgetElementById(s1);
 var s2=documentgetElementById("electronics");
 var s3=documentgetElementById("clothes");
  if(s1.value == "electronics"){
    s2.style.display = "block"
} else {
    s3.style.display = "block"
}
}
</script>

After researching without success, it seems that using event listeners like onchange, onclick, and onselect are deprecated for cakephp 3. How can I accomplish the dynamic loading of extra input forms triggered by selected options in cakephp3.7?

**

• FIRST EDIT

**

To simplify the question, I have 2 standard fields: category and subcategory. When a user selects a category, an AJAX function displays a list of available subcategories. Here is the AJAX code:

$(document).ready(function(){

$('#getSubCat').change(function(e){

    $.ajax({
        type: "POST",
        url:  "/products/getsubsaterogie",
        data: {categ: $(this).find('option:selected').text()},
        dataType: 'json',
        cache: false,
        headers : {
            'X-CSRF-Token': $('[name="_csrfToken"]').val()
        },
        success: function(data){
            console.log(data);
            let subcat = $('#subcategories')

            for (let sc of data) {
                console.log(sc.subcategorie)
                $('<option />', {value: sc.subcategorie_id, text: sc.subcategorie}).appendTo(subcat);
            }
        }
    });

    e.preventDefault();
})

}) The category input field is:

  <?php echo $this->Form->control('categorie_id', ['id'=>'getSubCat', 'options' => $categories, 'label' => __("What category ?"), 'class'=>'form-control', 'empty' => '(choose)']); 
                                               ?>

After the user chooses a category, the list of subcategories fetched by AJAX appears correctly in this input field. The onchange event is set to call the extraForm() function, but it doesn't trigger:

 <?php echo $this->Form->control('subcategorie_id', ['id'=>'subcategories', 'label' => __("What subcategory ?"), 'class'=>'form-control', 'options'=> [],'empty' => '', 'onchange' => 'myFormShow("getSubCat","subcategories")']); 
                                               ?>

Even after selecting a subcategory, the relevant extra form doesn't appear. Manually changing the display to block in CSS shows it, indicating that the javascript function isn't being called on the onchange event. I've also tried using onselect without success. The extraForm() function actually receives 2 arguments like extraForm(s1, s2). Any help is greatly appreciated.

- EDIT ACCORDING TO GREG'S REQUEST: Upon Greg's comment, this is the cake code to generate the list of subcategories. I didn't realize these details were necessary, as I believed it was a cakephp 3 issue related to javascript event listeners.

public function getsubsaterogie(){
            if($this->request->is('ajax')){
                $d = $this->request->getData();
                $subcat = '';
                $cat = TableRegistry::get('Categories')->find()
                ->where(['categorie' => $d['categ']])
                ->select('id')
                ->first();

                if(!empty($cat)){
                    $subcat = TableRegistry::get('Subcategories')->find()
                    ->where(['categorie_id' => $cat->id])
                    ->all();
                }

                echo json_encode($subcat);
                exit();
            }
        }

Any assistance is highly appreciated. Thank you.