Q&A
ありがとうございます！
なるほど。そういう理由だったのですね
onメソッドで解決できるという知識が身につきました
Twitterのアカウント登録のようなシステムを作っています。
①フォームにID/mailの入力して送信すると、そのメールアドレスに認証コードが送られる(仮登録状態)
②ページが切り替わり、認証コード入力フォームに切り替わる
③そのフォームに認証コードを入力して送信後、パスワード等を入力するフォームに切り替わる(本登録画面へ)
ツイッターでは確かこの一連の動作が「ページ遷移」することなく
１つのページ内で処理されていました。
それをまったく同じ実装を求めています。がフロントエンド側がうまくいきません。
現在の実装方法は、jQuery/Ajaxを利用し
1.mail/ID入力フォーム
2.認証コード入力フォーム
3.パスワード/名前等入力フォーム
の３つの文字列を用意しておき、form送信するたび、$("#ID").html()でフォームを
切り替えていくというやり方なのですが、
jQueryの仕様？バグ？なのか意図通りに動作していません。
1度目のPOST送信時に呼ばれるclick()イベント内で、$("#ID").html()でフォームの内容を書き換えてます。しかし
その書き換え後のフォームの送信ボタンを押すと、何故かページ遷移してしまう上に
自身のURLにPOSTされている？（ページリロードされてる？）ようで、ajaxに渡したURLにPOSTされていないようなのです。
1度目のPOST送信は「ページ遷移せず」に正常に送信され、$("#ID").html()によりフォームの内容が書き換わります。
しかし問題は書き換え後のフォームの送信ボタンを押すと上記のような動作が起こるのです。
まったく意味不明な動作がされていて困り果ててます。
当方javascriptはほぼ弄ったことがないので、そもそも今実装したいことに対してこのプログラムの書き方が最適なのかどうかもよくわかってませんので、よりよい実装方法がありましたらお教授頂きたいです。
以下ソースコードになります
ajax.php
php
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8" /> 5 <title>新規アカウント作成</title> 6 <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script> 7 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> 8 9<script> 10$(document).ready(function() { 11 var form_html1 = (function () {/* 12 <form method="post"> 13 <p> 14 USER_ID :<br> 15 <input type="text" id="uid" size="40"><br> 16 </p> 17 <p> 18 mail :<br> 19 <input type="text" id="mail" size="40"><br> 20 </p> 21 <p><input id="send1" value="送信1" type="submit" /></p> 22 </form> 23 */}).toString().replace(/(\n)/g, '').split('*')[1]; 24 var form_html2 = (function () {/* 25 <form method="post"> 26 <p> 27 認証コード :<br> 28 <input type="text" id="code" size="40" maxlength="6"><br> 29 </p> 30 <p> 31 <p><input id="send1" value="送信2" type="submit" /></p> 32 </form> 33 */}).toString().replace(/(\n)/g, '').split('*')[1]; 34 var form_html3 = (function () {/* 35 <form method="post"> 36 <input type="hidden" id="code" value=""> 37 <p>名前 :<br> 38 <input type="text" id="name" size="40" maxlength="20"><br></p> 39 <p>パスワード :<br> 40 <input type="text" id="password1" size="40" maxlength="20"><br></p> 41 <p>パスワード(確認) :<br> 42 <input type="text" id="password2" size="40" maxlength="20"><br></p> 43 <p><input id="send3" value="送信3" type="submit" /></p> 44 </form> 45 */}).toString().replace(/(\n)/g, '').split('*')[1]; 46 47 //ページ読み込み時の初期のフォーム内容を挿入する。 48 $("#form_erea").html( form_html1 ); 49 50 $('#send1').click(function() { 51 var param = { 52 'uid' : 0, 53 'mail' : 0, 54 'csrf_token' : 0, 55 'idx' : 1 56 }; 57 $.ajax({ 58 type: "POST", 59 url: "send.php", 60 dataType: "json", 61 data: param, 62 }).done(function(data, dataType) { 63 $("#form_erea").html( form_html2 ); 64 }).fail(function(XMLHttpRequest, textStatus, errorThrown) { 65 alert('Error : ' + errorThrown); 66 }); 67 return false; 68 }); 69 $('#send2').click(function() { 70 var param = { 71 'uid' : 0, 72 'mail' : 0, 73 'csrf_token' : 0, 74 'idx' : 1 75 }; 76 $.ajax({ 77 type: "POST", 78 url: "send.php", 79 dataType: "json", 80 data: param, 81 }).done(function(data, dataType) { 82 $("#form_erea").html( form_html3 ); 83 }).fail(function(XMLHttpRequest, textStatus, errorThrown) { 84 // エラーメッセージの表示 85 alert('Error : ' + errorThrown); 86 }); 87 return false; 88 }); 89 $('#send3').click(function() { 90 var param = { 91 'uid' : 0, 92 'mail' : 0, 93 'csrf_token' : 0, 94 'idx' : 1 95 }; 96 $.ajax({ 97 type: "POST", 98 url: "send.php", 99 dataType: "json", 100 data: param, 101 }).done(function(data, dataType) { 102 $("#form_erea").html( "OK." ); 103 }).fail(function(XMLHttpRequest, textStatus, errorThrown) { 104 // エラーメッセージの表示 105 alert('Error : ' + errorThrown); 106 }); 107 return false; 108 }); 109}); 110</script> 111</head> 112<body> 113 114<div id="form_erea"> 115</div> 116 117</body> 118</html>
回答2件
0
ベストアンサー
今後出力予定のHTMLに対してイベントを設定する場合は
$('#send1').click(function() {
ではなく
$(document).on("click", "#send1", function() {
で設定しましょう
投稿2019/02/03 02:58
退会済みユーザー
総合スコア0
0
下記コードは#send2がHTML上に無い場合無視されます。
#send2がHTML上に現れた後に実行してください。
js
1$('#send2').click(function() {/*略*/});
投稿2019/02/03 02:42
総合スコア69407
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/02/04 00:03