One form field don't submitted (Gridsome, Vuex)

Briefly summarize the issues you have been experiencing.
I’m using Gridsome + Vuex ecommerce website with some form on it.
All products in the cart are stored in Vuex store.
I want to send a form with all order products info such as name, color, quantity.
I’ve tried to bind order details (products in the cart) to the textarea value.
In this case I got the email without field with order details (name=“cart”).

Here is my form

    <form
      name="contact-test"
      method="post"
      data-netlify="true"
      netlify-honeypot="bot-field"
      action="/shop/success-order"
      class="checkout__form"
    >
      <input type="hidden" name="form-name" value="checkout" />
      <input type="hidden" name="bot-field" />
      <div class="container">
        <h3 class="mt-2">Оформление заказа</h3>
        <p class="checkoutForm__notice">
          * поля формы обязательны к заполнению
        </p>
        <h5>Контактная информация</h5>
        <div class="textField" value>
          <input
            id="name"
            v-model="order.name"
            name="name"
            type="text"
            placeholder="Фамилия и Имя*"
            required="required"
            class="textField__input"
          />
          <label for="name" class="textField__label">Фамилия и Имя*</label>
        </div>
        <div class="textField" value>
          <input
            id="phone"
            v-model="order.phone"
            name="phone"
            type="text"
            placeholder="Телефон*"
            required="required"
            class="textField__input"
          />
          <label for="phone" class="textField__label">Телефон*</label>
        </div>

        <div class="textArea__wrapper" value>
          <textarea
            id="comments"
            v-model="order.comments"
            name="comments"
            cols="30"
            rows="5"
            placeholder="Комментарии"
            class="textArea"
          ></textarea>
          <label for="comments" class="textArea__label">Комментарии</label>
        </div>
        <textarea
          v-model="order.cart"
          name="cart"
          cols="30"
          rows="5"
          placeholder="Детали заказа"
        ></textarea>
        <h5 class="checkoutForm__headingTotal">Всего к оплате 65 грн.</h5>
        <button type="submit" class="btn -primary btn__confirm">
          Подтвердить заказ
        </button>
      </div>
    </form>

The problematic form field is textarea with name=“cart”.

I have mounted hook on witch I assign order details to order.cart value.

Please provide a link to your live site hosted on Netlify.
https://amazing-goodall-34f4cd.netlify.com/checkout/

To reproduce the problem you can add some product to the cart.
For example, go
https://amazing-goodall-34f4cd.netlify.com/shop/webbing/48mm/china/
Than use primary button and you will be in the checkout page
https://amazing-goodall-34f4cd.netlify.com/checkout/

What have you tried as far as troubleshooting goes? Do you have an idea what is causing the problem?
I have tried different input types for order details, but nothing helps.

Hi,

Do you have the cart input field in the html version of the form or is it added by JS and not included in the pure html version of the form?

Hi futuregerald!
Yes, on form submission I receive all input fields (name, phone, comments), but not cart input.

Here is full form component. I’ve removed some unrelated parts from component.

<template>
  <div>
    <form
      name="contact-test"
      method="post"
      data-netlify="true"
      netlify-honeypot="bot-field"
      action="/shop/success-order"
      class="checkout__form"
    >
      <input type="hidden" name="form-name" value="checkout" />
      <input type="hidden" name="bot-field" />
      <div class="container">
        <h3 class="mt-2">Оформление заказа</h3>
        <p class="checkoutForm__notice">
          * поля формы обязательны к заполнению
        </p>
        <h5>Контактная информация</h5>
        <div class="textField" value>
          <input
            id="name"
            v-model="order.name"
            name="name"
            type="text"
            placeholder="Фамилия и Имя*"
            required="required"
            class="textField__input"
          />
          <label for="name" class="textField__label">Фамилия и Имя*</label>
        </div>
        <div class="textField" value>
          <input
            id="phone"
            v-model="order.phone"
            name="phone"
            type="text"
            placeholder="Телефон*"
            required="required"
            class="textField__input"
          />
          <label for="phone" class="textField__label">Телефон*</label>
        </div>

        <div class="textArea__wrapper" value>
          <textarea
            id="comments"
            v-model="order.comments"
            name="comments"
            cols="30"
            rows="5"
            placeholder="Комментарии"
            class="textArea"
          ></textarea>
          <label for="comments" class="textArea__label">Комментарии</label>
        </div>
        <textarea
          v-model="order.cart"
          name="cart"
          cols="30"
          rows="5"
          placeholder="Детали заказа"
        ></textarea>
        <h5 class="checkoutForm__headingTotal">Всего к оплате 65 грн.</h5>
        <button type="submit" class="btn -primary btn__confirm">
          Подтвердить заказ
        </button>
      </div>
    </form>
  </div>
</template>

<script>

export default {
  data: () => ({
    order: {
      name: "",
      phone: "",
      comments: "",
      cart: ""
    },
  }),
  computed: {
    cartTotal() {
      return this.$store.getters.cartTotal
    }
  },
  mounted() {
    // Set order.cart item
    //
    // Add total to the start
    const cartArr = [{ total: this.cartTotal + " грн." }]
    this.$store.state.cart.forEach(({ product, color, price, quantity }) => {
      cartArr.push({
        product,
        color,
        price,
        quantity
      })
    })
    // remove brackets from string
    this.order.cart = JSON.stringify(cartArr, null, 1)
      .replace(/[\]}[{]/g, "")
      .replace(/\n\s+,/g, "")
  },
  }
}
</script>

We’re asking about your file (which is called something.html) that has the form definition in it - that looks like javascript to me :slight_smile: Could you link us to that html file live on your site so we can see the definition there?

I did see the links you gave, but it is not clear that any of them have a form in the html so thanks for bearing with me and linking me direct to that file! I’m looking for something that matches this pattern:

  1. if I run “curl https://yoururl
  2. I see a content-type of html,
  3. and I see the <form> definition in the output directly

I’m not sure if I understand you correctly.
The form is located on https://amazing-goodall-34f4cd.netlify.com/checkout


I’m just looking the way for getting an email with order info.

You are showing me what the browser sees after rendering js. I need the link to the html file that has the html form definition in it. I gave you what I need to see:

  • curl a URL that ends in .html
  • see the html form definition.

That page when curl’ed has no form definition in it:

$ curl https://amazing-goodall-34f4cd.netlify.com/checkout | grep -i \<form\>
$

I do not think you manually create the form html ; probably your site generator does it for you. But I need you to find where that happens, since that’s where we read the form definition from, and what we can help you debug (instead of your javascript).