Hello guys I have a problem when I'm trying to send data by ajax and it's said that I have 400 (Bad Request) ajax errors and this is my code:

This is Html code: the rows is data of my database $row['attributes'] it has (size,brand,color......)

 <form id="form">
    <?php foreach($rows as $row): ?>
    <fieldset>
        <?php
          $result_attributes = get_terms([
            'taxonomy' => $row['attributes'],
            'hide_empty' => false,
          ]);
        ?>
        <select id="select-wid" name="<?php echo $row['attributes']?>">
          <option value="">Select</option>
            <?php foreach($result_attributes as $result_attribute) : ?>
                <option value="<?php echo $result_attribute->term_id; ?>"><?php echo $result_attribute->name; ?>
                </option>
            <?php endforeach; ?>
        </select>
    </fieldset>
    <?php endforeach;

(function($){
                $(document).ready(function(){
                  $(document).on('change', '#form', function(e) {           

                    var data = $(this).serialize();

                    e.preventDefault();

                    console.log(data);
                    $.ajax({
                      url: my_url,
                      data: data,
                      action: 'myactionfunction',
                      type: 'post',
                      success: function(result) {
                        $('.products').html(result);
                      },
                      error: function(result) {
                        console.warn(result)
                      },
                    });

                  });
                });
})(jQuery);

Image from console enter image description here

Image from php enter image description here