如何使用formsubmit提交HTML表单?不重定向页面吗?

Question

我一直试图在HTML (Bootstrap)发送信息到我的邮件id表单。我使用的是formsubmit

由于某些原因，在提交表单时，它将页面重定向到"成功"页面。我确实意识到，有一种方法将其重定向到不同的页面，但我宁愿有在其中的形式是存在的部分消失，并显示一个"成功"部分。作为参考，这里是我的表单代码:

<section id="get-started" class="get-started">
<div class="container">
<div class="row text-center">
<h1 class="display-3 fw-bold text-capitalize">Get started</h1>
<div class="heading-line"></div>
<!-- <p class="lh-lg">
can write something here later
</p> -->
</div>
<!-- START THE CTA CONTENT  -->
<div class="row text-white">
<div class="col-12 col-lg-6 gradient shadow p-3">
<div class="cta-info w-100">
<h4 class="display-4 fw-bold">Sign up for Beta!</h4>
<p class="lh-lg">
Join the waitlist for the beta program. Limited spots available!         </p>
<h3 class="display-3--brief">What will be the next step?</h3>
<ul class="cta-info__list">
<li>Enter your details.</li>
<li>Wait to be accepted into the beta program.</li>
<li>Enjoy using Clickytize.</li>
</ul>
</div>
</div>
<div class="col-12 col-lg-6 bg-white shadow p-3">
<div class="form w-100 pb-2">
<h4 class="display-3--title mb-5">Join the waitlist!</h4>
<form action="https://formsubmit.co/533cb72c9e26d2503a81229e9c8a246a" method="POST" class="row">
<input type="hidden" name="_captcha" value="false">
<div class="col-lg-6 col-md mb-3">
<input type="text" placeholder="First Name" id="inputFirstName" name="firstName" class="shadow form-control form-control-lg">
</div>
<div class="col-lg-6 col-md mb-3">
<input type="text" placeholder="Last Name" id="inputLastName" name="lastName" class="shadow form-control form-control-lg">
</div>
<div class="col-lg-12 mb-3">
<input type="email" placeholder="email address" id="inputEmail" name="emailId" class="shadow form-control form-control-lg">
</div>
<div class="col-lg-12 mb-3">
<textarea name="message" placeholder="Link your social media profile" id="message" name="message" class="shadow form-control form-control-lg"></textarea>
</div>
<div class="text-center d-grid mt-1">
<button type="submit" class="btn btn-primary rounded-pill pt-3 pb-3">
submit
<i class="fas fa-paper-plane"></i>
</button>
<script>
form.onSubmit= (event)=>{
event.preventDefault();
}
</script>
</div>
</form>
</div>
</div>
</div>
</div>
</section>

Answer 1

如果你想阻止页面重定向并提交表单，那么你需要注意使用javascript提交表单数据。

首先在form标签中添加onsubmit事件属性，如下所示:

<form  method="POST" class="row my-form" onsubmit="return submitForm()">

我们可以从form标签中去掉action属性。

在Javascript:

function submitForm() {

const form = document.querySelector('.my-form')
const formData = new FormData(form)
const url = 'https://formsubmit.co/533cb72c9e26d2503a81229e9c8a246a'
fetch(
url,
{
method: 'POST',
body: formData
}
)
return false
}

我们使用本地fetchAPI将数据发送到表单数据到端点。我们还使用FormDataAPI来创建一个形式为inputs

的对象。返回false防止页面重新加载

阅读更多关于:获取API