凍結
0 かな iPhone
ページ遷移しない拍手送信ボタンを作りたいのですがうまく行きません
拍手は使えないのかなと思ってメールも試してみましたが、こちらも普通にページ移動してしまいます
わかる方教えて頂きたいです

html
<form id="form" action="自分の拍手URL" method="post">
<input type="submit" value="送信する" id="submit-button">
</form>

css
<script>
const submitButton = document.querySelector('#submit-button');
const form = document.querySelector('#form');
form.addEventListener('submit', (event) => {
event.stopPropagation();
event.preventDefault();
const formData = new FormData(form);
const options = {
method: 'POST',
body: formData,
}
const url = form.getAttribute('action');
fetch(url, options);
});
</script>
01/30 06:31
返信
コメント投稿 検索
3 iPad
>>2
これで大丈夫ですか!あああ良かったです!!
素敵なサイトにしてください!
01/31 22:46
返信
2 かな iPhone
>>1
ありがとうございます!!!本当に理想の形になってくれました!
クリック後の変化のコード、押したことがわかるようになっててすごく助かりました!本当に感謝です!
知らないコードがまだまだいっぱいあって、教えて貰えて嬉しいです!
お助け頂き、本当に本当にありがとうございました!!
01/31 22:08
返信
1 iPad
そこまで詳しくないので完璧な回答はできないのですが、同じくどうやってもできずにいた時、submitボタンを使わない方法にしたら動きました。
自分でも理解しきれていない部分があるので、ご参考程度に。

html
// formにonclickの発火を追加、submitボタンではなくaタグに変更
// inputタグでvalueを送らないといいねが来なかったので追加しましたが、なんでなのかわかりません

<form id="form" action="自分の拍手URL" method="post" onclick="iine()">
<input type="hidden" name="message" value="dummy">
<a id="submit-button">送信する</a>
</form>


head
// onclickで発火させる形にしたため、不要になった何行かコメントアウトしています

<script>
function iine(){
const submitButton = document.querySelector('#submit-button');
const form = document.querySelector('#form');
//form.addEventListener('submit', (event) => {
//event.stopPropagation();
//event.preventDefault();
const formData = new FormData(form);
const options = {
method: 'POST',
body: formData,
}
const url = form.getAttribute('action');
fetch(url, options);

}
//);
</script>

私の環境で試したところこれで動きましたが、いかがでしょうか。
ちなみに、fetchの後に以下を入れると、「送信する」のリンク文字がクリック後変化するので面白いかもしれません。

submitButton.innerHTML = "ありがとう";

ご参考になれば幸いです。
01/31 19:35
返信