質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

17018閲覧

ページ更新時のフォーム情報の再送信防止について

witchy

総合スコア74

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1グッド

1クリップ

投稿2019/01/09 19:16

前提・実現したいこと

リロード時(下の画像で言うところの最新の状態に更新ボタンを押した時)に、前回の操作でフォームに入力し、送信した情報が、再び送信されてしまうことを防ぎたいと考えています。
location.reload()の引数をtrue、falseに変更しても、問題は解決せず、クッキー、セッション辺りが原因かと思うのですが、問題解決までの道筋が一向に見つかりません。

発生している問題・エラーメッセージ

フォームの再送信の確認 検索しているページは、入力した情報を使用しています。このページに戻った場合、操作のやり直しが発生する可能性があります。続行しますか?

該当のソースコード

ruby

1#!/usr/bin/env ruby 2# encoding: utf-8 3require 'cgi' 4require 'sqlite3' 5 6cgi = CGI.new; 7print cgi.header("charset=utf-8"); 8 9thread=cgi["thread"] 10data=cgi["name"] 11name=CGI.escapeHTML(data) 12data2=cgi["msg"] 13msg=CGI.escapeHTML(data2) 14time=cgi["time"] 15 16names = [] 17messages = [] 18times = [] 19db=SQLite3::Database.new("sample.db") 20db.transaction do 21 if(name != "" && msg != "" && time != "") 22 db.execute('INSERT INTO content VALUES(?,?,?,?);',name,msg,thread,time) 23 end 24 db.execute('select name from content where thread = ?;',thread) do |key| 25 names.push(key[0]) 26 end 27 db.execute('select message from content where thread = ?;',thread) do |key| 28 messages.push(key[0]) 29 end 30 db.execute('select time from content where thread = ?;',thread) do |key| 31 times.push(key[0]) 32 end 33end 34db.close 35 36print <<EOF 37<!DOCTYPE html> 38<html lang="ja"> 39<head> 40<meta charset="UTF-8"> 41<link rel="stylesheet" type="text/css" href="index.css"> 42<meta http-equiv="X-UA-Compatible" content="ie=edge"> 43<title>スレッド&lt#{thread}&gt</title> 44<script type="text/javascript"> 45function pre_check(){ 46 name = document.getElementById("name").value; 47 msg = document.getElementById("msg").value;   48 ret=true; 49 if(!(name.length > 0)){ 50 document.js.name.value="名無しさん"; 51 } 52 if(!(msg.length > 0)){ 53 alert('空のコメントは送信できません。'); 54 ret = false; 55 return ret; 56 } 57 document.js.name.value=name; 58 document.js.msg.value=msg; 59 return ret; 60} 61function getNowTime() { 62 var now = new Date(); 63 var year = now.getFullYear();//64 var mon = now.getMonth()+1; //月 1を足す 65 var day = now.getDate();//66 var hour = now.getHours();//時間 67 var min = now.getMinutes();//68 var sec = now.getSeconds();//69 70 //出力 71 var s = year + "年" + mon + "月" + day + "日" + hour + "時" + min + "分" + sec + "秒"; 72 document.js.time.value=s; 73} 74function koshin(){ 75 document.cookie = "value=; max-age=0"; 76 location.reload(true); 77} 78</script> 79</head> 80 81<body> 82<h1>スレッド&lt#{thread}&gt</h1> 83<h2>コメントを投稿</h2> 84<div> 85<form name="js" action="thread.rb"  onsubmit="return pre_check()" method="POST"> 86<p>名前: <input type="name" id="name" name="name" value="名無しさん"></p> 87<p>コメント:<br> 88<textarea id="msg" name="msg" rows="6" cols="60"></textarea></p> 89<input type="hidden" name="thread" value="#{thread}"> 90<input type="hidden" id="time" name="time" value=""> 91<p><input type="submit" value="送信" onClick="getNowTime()"><input type="reset" value="クリア"></p> 92</form> 93</div> 94<a href="toppage.rb">トップページに戻る</a> 95<hr> 96<h2>コメント一覧</h2> 97<input type="button" value="最新の状態に更新" onclick="koshin()"> 98EOF 99 100for i in 0..names.size-1 101print <<EOF #HTML記述開始 102<p>#{i} 名前: #{names[i]} 送信日時: #{times[i]}</p> 103<p>#{messages[i]}</p> 104EOF 105end 106 107print <<EOF 108</body> 109</html> 110EOF 111

イメージ説明

aaaaaaaa👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

いわゆる2重投稿問題(重複サブミット)ですね。
ブラウザの開発ツールでも使えば、何が発生しているか確認できると思います。

対策は以下の記事がわかりやすいかと
さいきょうの二重サブミット対策

要件によっては、対策を組み合わせて使用する必要もあります。
参考まで。

投稿2019/01/10 00:08

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

witchy

2019/01/10 20:42

ご回答ありがとうございます! 二重サブミット問題を取り上げてるサイトは多いんですね。 トークンによるチェックと、受信した内容と前回受信した内容が一致した場合は、受信した内容を破棄することによるチェックを試してみたいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問