我有以下表格：
/* Contact Form */
input[type=text],
[type=email],
select,
textarea {
width: 100%;
padding: 12px;
border: 1px solid #555;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #0563bb;
color: white;
padding: 12px 20px;
border: none;
cursor: pointer;
}
input[type=submit]:hover {
opacity: 0.9;
}
.contactform {
position: relative;
border-radius: 50px;
background-color: #f2f2f2;
padding: 5px;
z-index: 2;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
margin-top: 1%;
width: 100%;
animation-name: gradient;
animation-duration: 3s;
animation-iteration-count: infinite;
}
.contactform:hover {
animation-name: gradient;
animation-duration: 15s;
animation-iteration-count: infinite;
}
.column {
float: center;
width: 50%;
margin-top: 6px;
padding: 20px;
display: block;
margin-left: auto;
margin-right: auto;
}
.row:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 600px) {
.column,
input[type=submit] {
width: auto;
margin-top: 0;
}
}
@keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}<section id="contact">
<div class="container" data-aos="fade-up">
<div class="contactform">
<div style="text-align:center">
<div class="section-title">
<h2><br/>Get In Touch</h2>
</div>
<p>Feel Free To Reach Out To Me Through This Form! </p>
</div>
<div class="row">
<div class="column">
<form name="myform" action="https://formspree.io/f/xdobkgny" method="POST" novalidate>
<label for="firstname">First Name</label>
<input type="text" id="first name" name="firstname" placeholder="Your First Name.." required>
<label for="lastname">Last Name</label>
<input type="text" id="lastname" name="lastname" placeholder="Your Last Name.." required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Your Email.." required>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Lets Collaborate.." style="height:170px" required></textarea>
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</div>
</section>此表單正在向所需的電子郵件發送回應，但是我想將重定向頁面更改為thankyou.html而不是 Formspree 重定向頁面。我將如何修改以下 JS 代碼？這段 JS 代碼還有一些其他資訊，例如錯誤訊息...等，但我已經涵蓋了這些資訊，所以我可以洗掉那部分嗎？本質上，我唯一想改變的是提交時重定向，不想要任何錯誤或任何其他資訊。我使用 Formspree 提供的 JS 代碼的唯一原因是改變重定向而不是別的。這怎么可能？我想洗掉以下 JS 代碼中提供的諸如Thanks for your submission!和 之類的文本，Oops......因為我的檔案中已經包含了我自己的 js 代碼。
JS代碼：
var form = document.getElementById("my-form");
async function handleSubmit(event) {
event.preventDefault();
var status = document.getElementById("my-form-status");
var data = new FormData(event.target);
fetch(event.target.action, {
method: form.method,
body: data,
headers: {
'Accept': 'application/json'
}
}).then(response => {
status.innerHTML = "Thanks for your submission!";
form.reset()
}).catch(error => {
status.innerHTML = "Oops! There was a problem submitting your form"
});
}
form.addEventListener("submit", handleSubmit)
更新（在河豚回答之后）
https://watch.screencastify.com/v/BSkuGitl5ACHDWEvGziM
uj5u.com熱心網友回復：
要使用 JavaScript 重定向，您可以使用window.location = <URL>. 如果您希望在發生之后發生這種fetch情況，無論結果如何，您都可以將函式傳遞給該.finally()方法：
var form = document.getElementById("my-form");
async function handleSubmit(event) {
event.preventDefault();
var data = new FormData(event.target);
fetch(event.target.action, {
method: form.method,
body: data,
headers: {
'Accept': 'application/json'
}
}).finally(() => {
window.location = "/thankyou.html";
});
}
form.addEventListener("submit", handleSubmit)
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/397277.html
標籤：javascript html 查询 css