submitの処理の後別の画面を表示させる

締切済

質問者：syandera
質問日時：2019/12/16 17:28
回答数：1件

入力欄に入力をした後その内容を確認し、ボタンを押したら
ありがとうございました。と表示するようにしたいのですが
最初の入力画面に戻ってしまいます。
submitで正しく送信することはできていますが
その後の処理がうまくいっていないみたいです。
どなたか教えていただけませんでしょうか

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>show and hide</title>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></sc …
<script>
$(function(){
$('#ok').click(function(){
$("#home").hide();
$("#confilm").show();
$("#thank").hide();
var num = $('#num').val()+"<br>";
var info = $('#info').val()+"<br>";
var name = $('#name').val()+"<br>";
var age = $('#age').val()+"<br>";
var sex = $('#sex').val()+"<br>";
$("#confilm").after(sex);
$("#confilm").after("性別：");
$("#confilm").after(age);
$("#confilm").after("年齢：");
$("#confilm").after(name);
$("#confilm").after("名前：");
$("#confilm").after(info);
$("#confilm").after("住所：");
$("#confilm").after(num);
$("#confilm").after("郵便番号：");

});
$('#send').click(function(){
$("#form01").submit();
$("#home").hide();
$("#confilm").hide();
$("#thank").show();

});
$('#back').click(function(){
$("#confilm").hide();
$("#thank").hide();
$("#home").show();
});

$('#cl').click(function(){
$('#num').val('');
$('#info').val('');
$('#name').val('');
$('#age').val('');
$('#sex').val('');
});

$("#confilm").hide();
$("#thank").hide();
});
</script>
</head>
<body>
<div id="home">
<h1>個人情報入力フォーム</h1>
入力して下さい
<form id='form01'>
<p> 郵便番号:<input id='num' name='num' type='text'/></p>
住所:<input id='info'name='address' type='text'/>
<p> 名前:<input id='name'name='name' type='text'/></p>
<p> 年齢:<input id='age' name='age' type='text'/></p>
<p> 性別:<input id='sex' name='sex' type='text'/></p>
<input type='button' name='OK' id='ok' value='送る'/>
<input type='button' name='cl' id='cl' value='消す'/>
</form>
</div>

<div id="confilm">
<h1>確認</h1>
<input type="button" id="send" name="se" value="send"/>
<input type="button" id="back" name="cl" value="back"/>
</div>

<div id="thank">
<h1>ありがとうございました。</h1>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

参考程度に

No.1

回答者： fujillin
回答日時：2019/12/17 12:24

こんにちは

＞ありがとうございました。と表示するようにしたいのですが
＞最初の入力画面に戻ってしまいます。
え～～っと・・・
「ありがとう」が表示されないというのが問題なのでしょうか？
あるいは、「入力画面に戻る」ことが問題なのでしょうか？

まず、「ありがとう」を表示する際には、スクリプトでフォームをsubmitしていますよね？
submitすると、ブラウザはサーバにデータを送り、そのレスポンスを待って画面遷移します。
画面遷移のタイミングが速いと「ありがとう」はほとんど見えなかったりします。
何度か試してみれば、ちらりと見えることを確認できるのではないかと思います。

もう一方の「入力画面に戻る」に関しては、HTMLがご提示のままであるなら、formのactionが設定されていないことによると考えられます。
actionが設定されていないと、遷移先は元のURLとされるようですので、「入力画面に戻る」ということになります。

＞submitで正しく送信することはできていますが
＞その後の処理がうまくいっていないみたいです。
どうやって、「正しく送信できている」ことを確認しているのですか？
「その後の処理」はどこに記してあるのでしょうか？
両方ともサーバ側での処理になりますけれど、どのような仕組みにしているのですか？