HELP with textboxes content not going to the cart

[Boliye]

Store URL: https://6f6084-2.myshopify.com  (please see the product page or search the product "brown jacket")

Pass: door

Hi! Please I want to add a checkbox to my product page, which when checked gives 3 textboxes to write in them and the content of those textboxes go to the cart, I have successfully deployed the checkbox and when checked it gives three textboxes but the problem is that the content in those textboxes isn't going to the cart. I wrote a code for text boxes in the main-product.liquid file and the javascript code in dt-theme.js file. I will be writing the code down below and please help me find what I have done wrong or If I have pasted the code in the wrong file.

code for textboxes in main-product.liquid below with the form id of the add to cart button ("product-form-template--21570773975329__main")

<form id="product-form-template--21570773975329__main" action="/cart/add" method="post" enctype="multipart/form-data">
  <!-- Your existing product form code -->

  <!-- Add this checkbox -->
  <input type="checkbox" id="customSizeCheckbox" name="properties[Use custom size]"> Use custom size

  <!-- Add these textboxes -->
  <div id="customSizeInputs" style="display: none;">
    <p class="line-item-property__field">
      <label for="bustSize">Bust Size</label><br>
      <input type="text" id="bustSize" name="properties[Bust Size]" placeholder="Enter size here" form="product-form-template--21570773975329__main">
    </p>

    <p class="line-item-property__field">
      <label for="waistSize">Waist Size</label><br>
      <input type="text" id="waistSize" name="properties[Waist Size]" placeholder="Enter size here" form="product-form-template--21570773975329__main">
    </p>

    <p class="line-item-property__field">
      <label for="bicepSize">Bicep Size</label><br>
      <input type="text" id="bicepSize" name="properties[Bicep Size]" placeholder="Enter size here" form="product-form-template--21570773975329__main">
    </p>
  </div>
</form>

the javascript code pasted in dt-theme.js, below ⬇️

document.getElementById('customSizeCheckbox').addEventListener('change', function() {
  var customSizeInputs = document.getElementById('customSizeInputs');

  if (this.checked) {
    customSizeInputs.style.display = 'block';
  } else {
    customSizeInputs.style.display = 'none';
  }
});

Sharing the image of the product page as well

and this is how I have the cart to show the values, (highlighted in red)

Thanks! Would be waiting for your help!

[Guleria]

Hello @Boliye ,

1) Remove this attribute  

form="product-form-template--21570773975329__main"

form all inputs.

2) Use your code in product template existing form tag.

3) After adding it to cart check the cart page https://6f6084-2.myshopify.com/cart

Issue is in your cart drawer. You need to check why cart drawer not display the line item properties or you can ask the theme support about it.

Thanks