The form action seems to be unresponsive when utilized within a vue-bootstrap form

I'm utilizing a form submission service called formsubmit.co, which allows forms to receive input data via email without the need to develop a backend for storing and transmitting data. Formsubmit handles all the storage and sending processes. According to their website, all you have to do is set the action attribute to point towards their site along with your email, specify the method as POST, and ensure that all inputs and selectors have appropriate names.

After testing the service with their live demo and finding it functioning properly, I suspect that the issue lies within my form itself.

The expected outcome is that when a user clicks submit, the input data should be sent to me via email. However, this hasn't happened yet.

Currently, I am using Vue.js integrated with Bootstrap. Here's the form:

Form:


Vue.component('bootstrap-form', {
    template: `
        <div>
    <b-form action="https://formsubmit.co/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bfcbdacccb8f8c8786ffd8d2ded6d391dcd0d2">[email protected]</a>" method="POST" role="form" @submit="onSubmit" v-if="show" class="bootstrap-form">


      <b-form-group id="input-group-1" label="Your Name:" label-for="input-1">
        <b-form-input
          name="name"
          id="input-1"
          v-model="form.name"
          placeholder="Enter name"
          required
        ></b-form-input>
      </b-form-group>

      <b-form-group
        id="input-group-2"
        label="Email address:"
        label-for="input-2"
        description="We'll never share your email with anyone else."
      >
        <b-form-input
          id="input-2"
          name="email"
          v-model="form.email"
          type="email"
          placeholder="Enter email"
          required
        ></b-form-input>
      </b-form-group>

       <b-form-group
        id="input-group-3"
        label="Phone Number:"
        label-for="input-3"
        description="We'll never share your number with anyone else."
      >
        <b-form-input
          id="input-3"
          name="telephone"
          v-model="form.telephone"
          type="tel"
          placeholder="XXX-XXX-XXXX"
          pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
          required
        ></b-form-input>
      </b-form-group>

       <b-form-group id="input-group-4" label="Regarding:" label-for="input-4">
        <b-form-select
          name="option"
          id="input-4"
          v-model="form.option"
          :options="options"
          required
        ></b-form-select>
      </b-form-group>

      <b-form-group v-if="this.form.option == 'Shower Doors'" id="input-group-5" label="Shower Doors:" label-for="input-5">
        <b-form-select
          id="input-5"
          name="shower doors"
          v-model="form.showerDoor"
          :options="showerDoors"
          required
        ></b-form-select>
      </b-form-group>

        <b-form-group v-if="this.form.option == 'Other'" id="input-group-6" label="Inquiry:" label-for="input-6">
        <b-form-textarea
          id="input-6"
          name="inquiry"
          v-model="form.other"
          required
        ></b-form-textarea>
      </b-form-group>

      <b-form-group v-if="this.form.submitted == true" id="input-group-7"
        description="Thank you, We'll be in Contact soon!"
      ></b-form-group>
      

      <b-button type="submit" variant="primary">Submit</b-button>
    </b-form>
  </div>
    `,
    data() {
      return {
        form: {
          email: '',
          name: '',
          telephone: '',
          option: null,
          showerDoor: null,
          submitted: false
        },
        options: [{ text: 'Select One', value: null }, 'Shower Doors', 'Mirrors', 'Glass Shelves', 'Other'],
        showerDoors: [{ text: 'Select One', value: null }, 'Sliding Shower & Tub Doors', 'Swinging Shower Doors', 'Splash Guard/Spray Screen', 'Custom'],
        show: true
      }
    },
    methods: {
      onSubmit(event) {
        event.preventDefault()
        console.log(JSON.stringify(this.form));
        this.form.submitted = true
        this.form.email = ''
        this.form.name = ''
        this.form.telephone = ''
        this.form.option = null,
        this.form.showerDoor = null,
        // Trick to reset/clear native browser form validation state
        this.show = false
        this.$nextTick(() => {
          this.show = true
        })
      }
    }
})


Answer №1

Following a conversation with formSubmit, I was advised to test the form submission process incorporating AJAX.

Subsequently,

$.ajax({
    url: "https://formsubmit.co/ajax/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b1c8dec4c3f1d4dcd0d8dd9fd2dedc">[email protected]</a>",
    method: "POST",
    data: {
        name: "FormSubmit",
        message: "I'm from Devro LABS"
    },
    dataType: "json"
});

Implementing this code within my onSubmit function allowed the submissions to start functioning properly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am having trouble importing and using a Vue.js single-file component after the project has been built

I've been exploring ways to reuse some of my components from one repository in another repository. One of the components I'm working with is a single file component. To achieve this, I set up webpack to generate a .js bundle for that particular c ...

My goal is to ensure that when a user copies the URL of a website from the address bar and pastes it into a social media app, the link automatically transforms into the title of

Similar to the process in Airbnb where a copied URL is pasted in Slack and replaced with specific text along with the site URL I have tried adding og:title, description, and images, but cannot figure out how to handle this issue. Any assistance would be a ...

Steps for creating a link click animation with code are as follows:

How can I create a link click animation that triggers when the page is loaded? (function () { var index = 0; var boxes = $('.box1, .box2, .box3, .box4, .box5, .box6'); function start() { boxes.eq(index).addClass('animat ...

When assigning JSON to a class object, the local functions within the class became damaged

This is a demonstration of Object Oriented Programming in JavaScript where we have a parent Class called Book with a child class named PriceDetails. export class Book { name: String; author: String; series: String; priceDetails: Array<Price> ...

Express.js app issue: post id assigns category name instead

Currently, I am in the process of developing a blogging application using Express, EJS, and MongoDB. To view the GitHub repository for this project, please click on this link. The posts within my application are organized into different categories, each r ...

Incorporating TinyMCE into numerous dynamically generated text areas

I am facing an issue with dynamically created textareas. The content in these textareas is generated dynamically. This is how I retrieve the data and create the textareas dynamically: $(document).ready(function(){ $('#btn').click(function(){ ...

Axios: Ensuring cookies are present in the browser prior to making an API request

Purpose: How can I verify the presence of a cookie in the browser code before making a request that always requires credentials? The cookie contains a JWT token. Additional Information: Front-end coded using Vue.js All API calls to back-end made with Ax ...

Choose between using a function as a parameter or an instruction when making a selection based on change

I am curious about the distinction between the following two sentences: $('#select').on('change', function() { Manager.doRequest(); }).trigger('change'); And these variations: $('#select').on('change&apos ...

Removing   from a text node using JavaScript DOM

I am currently working with xhtml in javascript. To retrieve the text content of a div node, I am concatenating the nodeValue from all child nodes where nodeType is Node.TEXT_NODE. However, sometimes the resulting string includes a non-breaking space enti ...

What are the steps to utilize WebRTC in transmitting a real-time webcam feed from the user interface to the server?

Currently, I am in the process of developing a simple Streamyard alternative that can capture live webcam streams from users' browsers and transmit them to the backend for further processing and conversion into the necessary format for streaming on pl ...

Issue: Reactjs - Material-UI HTML Tooltip does not display dynamic HTML content.In the Reactjs

I have been using a customized HTML MUI Tooltip. Currently, it is functioning with static content but I am looking to make it dynamic. Unfortunately, it is not working with dynamic HTML content. Here is my attempted approach: const ADJUSTMENT_HELP_TEXT = ...

Retrieve the current element's 'this' object even after binding an external 'this' object

Is the title of this question confusing? Let's dive in. Imagine you have something like this: var Test = function(){ this.foo = a; } Test.prototype.init = function() { $(document).on('change', '.form-control', this.myFun ...

Is it possible to pass an HTML element's id attribute to a function in JavaScript?

In the following code snippet, I am looking to send the id=content to the function mr and then display the result in the passed id=result. While this functionality is currently limited to this HTML file, I aim to extend it to other HTML pages by adding the ...

A fixed header for tables that shifts along with horizontal scrolling

Seeking assistance with a persistent issue - I have a table with a fixed header on vertical scroll (see CSS and Javascript below), but the header fails to move horizontally when I scroll. window.onscroll = functi ...

Button within the Magnific Popup (do not use to close)

I am currently developing a website with a gallery page that utilizes the Magnific Popup plugin. My client has provided lengthy 'captions' for each image, almost like short stories. To display these captions effectively, I have utilized the titl ...

JavaScript: Transforming a key-value pair collection into an array of objects

I'm looking to convert a dictionary into a list of dictionaries using JavaScript. Can someone help me with that? var dict = { "apple" : 10, "banana" : 20, "orange" : 30 } var data = [ {"apple" : 10}, {"ban ...

Is there a way to eliminate the # sign from hash data using jQuery?

Can anyone help me retrieve the hash value from the URL? var hash = window.location.hash; I am looking for a way to remove the "#" sign from the hash. Any suggestions? ...

Check the document's location if the page contains a class with a specific value

I am encountering an issue while using PHPMailer. I am trying to redirect the page after submitting a form and display a success popup window. After successfully submitting the form, a message is displayed in a popup window (JavaScript adds a class ' ...

What is the best way to toggle DOM classes in React using Material-UI components?

Currently utilizing Material UI alongside React, I have a div element: <div className={classes.div}></div> I am attempting to dynamically add a conditional class to it: <div className={classes.div + divActive ? `${classes.div}__active` : &a ...

Is conditional rendering in Vue JS determined by the URL address?

I have a component called head.vue <b-navbar toggleable="lg" type="dark"> <b-navbar-brand href="#"><img src="logo.png" class='logo'/></b-navbar-brand> </b-navbar> My goal is to display the logo only on spe ...