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

Support
1

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.

2

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?

3

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>
4

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
5

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

checkout-form
checkout-form1943×1783 627 KB

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

6

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).