表单操作在vue-bootstrap表单内不响应
表单操作在vue-bootstrap表单内不响应
提问于 2021-01-08 00:08:05
我目前正在使用formsubmit.co的一项服务，该服务使表单可以通过电子邮件接收输入数据，而不必构建存储和发送数据的后端，而是formsubmit处理存储和发送，在他们的网站上，他们声称所有你需要做的就是设置动作属性，以指向他们的网站与您的电子邮件，设置方法为发布和所有输入的名称，选择器等。
我用他们的现场演示测试了这个服务，它似乎工作得很好，所以我相信问题出在我的表单本身。
应该发生的是，当用户单击提交时，输入数据应该通过电子邮件发送给我，但到目前为止还没有发生。
我目前使用的是集成了Bootstrap的Vue.js。这是表格。
表格：
Vue.component('bootstrap-form', {
template: `
<div>
<b-form action="https://formsubmit.co/test0389@gmail.com" 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
})
}
}
})回答 1
Stack Overflow用户
发布于 2021-01-08 01:51:29
在与formSubmit交谈后，他们引导我尝试了包含AJAX的表单提交。
进入后
$.ajax({
url: "https://formsubmit.co/ajax/your@email.com",
method: "POST",
data: {
name: "FormSubmit",
message: "I'm from Devro LABS"
},
dataType: "json"
});在我的onSubmit函数中，提交开始起作用了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65615908
复制相关文章
相似问题
腾讯云开发者
