Есть проблема в коде, я не получаю его за использование AJAX

Question

У меня есть форма, которая добавляет товары к этой категории, и это делается с помощью AJAX для вставки в базу данных с использованием сервлета. В моей форме есть 6 компонентов, которые принимают имя, цену, количество, изображение (имя изображения), категорию и описание при заполнении описания, когда я заполняю описание, он отправляет все значения в сервлет, не нажимая кнопку добавления продукта

это моя вся форма: -

<div class="p-t-33 p-b-60">
  <div class="flex-m flex-w p-b-10">
    <div class="s-text15 w-size15 t-center">
      <b>Product Image-</b>
    </div>
    <div class="rs2-select2 rs3-select2 bo4 of-hidden w-size16">
      <input type="file" id="fileclear" name="productimage">
    </div>
  </div>
  <div class="flex-m flex-w p-b-10">
    <div class="s-text15 w-size15 t-center">
      <b>Product Name-</b>
    </div>
    <div class="rs2-select2 rs3-select2 bo4 of-hidden w-size16">
      <input type="text" name="productname" id="productname">
    </div>
  </div>
  <div class="flex-m flex-w p-b-10">
    <div class="s-text15 w-size15 t-center">
      <b>Product Price-</b>
    </div>
    <div class="rs2-select2 rs3-select2 bo4 of-hidden w-size16">
      <input type="text" name="productprice" id="productprice">
    </div>
  </div>
  <div class="flex-m flex-w p-b-10">
    <div class="s-text15 w-size15 t-center">
      <b>Product Quantity-</b>
    </div>
    <div class="rs2-select2 rs3-select2 bo4 of-hidden w-size16">
      <input type="text" name="productquantity" id="productquantity">
    </div>
    /div>
    <div class="flex-m flex-w p-b-10">
      <div class="s-text15 w-size15 t-center">
        <b>Product Description-</b>
      </div>
      <div class="form-group">
        <textarea class="form-control" rows="7" id="ogdescription" name="description"></textarea>
      </div>
    </div>
    <div class="flex-m flex-w">
      <div class="s-text15 w-size15 t-center">
        <b>Category name-</b>
      </div>
      <input type="text" name="categorynameproduct" class="getcat">
      <br>
      <div class="anyclass text-center">
        <div class="list-group" id="mainlist">
          <b><a id="mainofmainlist" class="list-group-item"></a></b>
        </div>
      </div>
    </div>
    <br>
  </div>
  <div class="flex-r-m flex-w p-t-10">
    <div class="w-size16 flex-m flex-w">
      <div class="btn-addcart-product-detail size9 trans-0-4 m-t-10 m-b-10">
        <!-- Button -->
        <button name="addproduct" id="addproduct" class="flex-c-m sizefull bg1 bo-rad-23 hov1 s-text1 trans-0-4">
                 <b> Add Product</b>
                    </button>
      </div>
    </div>
  </div>
  <br>
  <span class="label label-success" id="messageshow" style="width: 80%;font-size: 28px;text-align: center;right:10%">HI GUYS</span>
</div>

это мой код AJAX

$('.anyclass').click(function(event) {
  var getit = event.target.innerHTML;
  $('.getcat').val(getit);
  return false;
});
var imagename, ogdescription;
$('input[type="file"]').change(function(e) {
  imagename = e.target.files[0].name;
  ogdescription = $('#ogdescription').val();
});
var go = 'looki';
$('#addproduct').click(function() {
  $.ajax({
    url: 'insertproduct',
    data: {
      productname: $('#productname').val(),
      productprice: $('#productprice').val(),
      productquantity: $('#productquantity').val(),
      catename: $('.getcat').val(),
      imagename: imagename,
      description: ogdescription
    },
    success: function(responseText) {
      if (responseText !== null) {
        $('#productname').val("");
        $('#productprice').val("");
        $('#productquantity').val("");
        $('.getcat').val("");
        $('#ogdescription').val("");
        $('#fileclear').val("");
        $('.label').show();

        $('#messageshow').text(responseText);

      }
    }
  });
});

Есть ли в моем коде проблема с передачей данных сервлету перед нажатием кнопки