如何解决由javascript控制的HTML表单有时会使用GET提交
我有以下HTML表单:
fetch("/pm/con/")
.then((result) => { return result.json(); })
.then((data) => {
// Initialize Stripe.js
const stripe = Stripe(data.publicKey);
document.querySelector("#submitBtn").addEventListener("click",() => {
// Get Checkout Session ID
var amount = document.getElementById('donationAmount').value;
var amount_offset = amount + '00';
fetch("/pm/create-checkout-session/"+amount_offset)
.then((result) => { return result.json(); })
.then((data) => {
console.log(data);
// Redirect to Stripe Checkout
return stripe.redirectToCheckout({sessionId: data.sessionId})
})
.then((res) => {
console.log(res);
});
});
});
<form class="form-inline" id="contactForm" name="contact" >
<div class="form-sec1">
<div class="col-md-12 col-xs-12">
<div class="form-group">
<label for="name">Amount <b>*</b></label>
<input type="text" id="donationAmount" name="donationAmount" class="form-control">
</div>
</div>
<div class="form-sec3">
<div class="col-md-12 col-xs-12">
<button id="submitBtn" class="btn btn-primary hvr-sweep-to-right" name="submitBtn">Donate</button>
</div>
</div>
</form>
如您所见,表单没有“方法”属性。但是,有时会以“ GET”提交。
如何让表单仅由表单上方的JS控制?
解决方法
我这样做了
form with no action and where enter does not reload page
您需要添加action =“ javascript:void(0);”到表单,以防止页面重新加载并保持HTML标准。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。