- ベストアンサー
DOM操作後の状態を再現するには
- PHPを使用したWebプログラミングにおいて、DOM操作後の状態を再現する方法について教えてください。
- 一般的なWebサイトの仕組みとして、テキストボックスに入力してサブミットし、入力チェックでエラーがあった場合には入力ページに戻ることがあります。
- しかし、JavascriptでDOMを操作してテキストボックスを追加した場合、エラー時にDOM操作で追加したテキストボックスが消えてしまいます。そのテキストボックスと入力値を再現する方法を教えてください。
- scottie55
- お礼率94% (17/18)
- JavaScript
- 回答数8
- ありがとう数7
- みんなの回答 （8）
- 専門家の回答
質問者が選んだベストアンサー
そもそもいきなりサブミットするのはよくありません。 まず、クライアントサイドでチェック＋もしDB参照がいるならAjaxで問い合わせをして、それでOKならサブミット、NGならそのページのままでエラーを表示します。 そうすればサブミット時にNGになるのは、故意に無理矢理不正な値を送信した場合のみですので、単にエラーページを表示するだけでよくなるのです。 ページの遷移やはなるべく抑えなければなりません。抑えれば抑えるほど構造が簡単になります。
その他の回答 (7)
- lv4u
- ベストアンサー率27% (1862/6715)
No.6です。ちょっと訂正 concrete5はフレームワークというより、WordPressのようなＣＭＳソフトといったほうが正しいですね。
お礼
concrete5ですか、ちょっと調べてみます。情報ありがとうございました。
- lv4u
- ベストアンサー率27% (1862/6715)
>>この問題を回避できるようなPHPフレームワークをご存知でしたら、ぜひご紹介下さい。 うーん、そういうDOMの問題を解決しようというのじゃあなく、「楽してＷｅｂサイトを作りたい、PHPやJavascriptをできるだけいじりたくない」という基準で、私は、Concrete5っていうフレームワークを選んで使っています。 このフレームワークを使い、カスタマイズして企業で商用利用されているところもあるようです。
- ONEONE
- ベストアンサー率48% (279/575)
バリデーションチェックをajaxで行う方法も一案かな思います。 ページ遷移しなくて済むので、動的に追加したパーツも消えません。
お礼
ご回答ありがとうございました。 確かにajaxはページ遷移もなく、UI、UXの観点からも好ましいかもしれませんね。ajax勉強します。
- lv4u
- ベストアンサー率27% (1862/6715)
>>タグに修正が入った際は両方のソースに手を入れないといけなくなるのでメンテナンス性は下がると思うのですが、DOM操作を伴うWebサイトでは致し方ない事なのでしょうか？ メンテナンス低下は、仕方ないでしょう。それを問題とする方たちは、その苦労が減るようなフレームワークを探したり、ソースの自動生成の仕組みを考えたりするのだと思います。
お礼
重ねてのご回答、誠にありがとうございます。 私も技術者のはしくれとして、可能な限りメンテナンス性の低下は避けた方がいいと考えています。それで今まで苦労してきましたので。。。 この問題を回避できるようなPHPフレームワークをご存知でしたら、ぜひご紹介下さい。
- babu_baboo
- ベストアンサー率51% (268/525)
<?php $list = ''; $hoge = isset ($_POST['@hoge']) ? $_POST['@hoge']: array ('', ''); foreach ($hoge as $h) $list .= '<li><input type="text" name="@hoge[]" value="'.$h.'">'; ?> <!DOCTYPE html> <meta charset="utf-8"> <body> <form action="#" method="post" id="piyo"> <ol id="fuga"> <?php echo $list; ?> </ol> <input type="button" value="add"> / <input type="submit" value="submit"> </form> <script> function setValue (e) { e.value = this; } function addList (f) { var ol = f.querySelector ('#fuga'); var li = ol.querySelector ('li').cloneNode (true); Array.prototype.forEach.call ( li.querySelectorAll ('input'), setValue, ''); ol.appendChild (li); } function handle (event) { var e = event.target; if ('button' === e.type) if ('add' === e.value) addList (e.form); } document.addEventListener ('click', handle, false); </script>
お礼
具体的なコードのご提示ありがとうございます。 サーバ側でタグを生成しておいて、HTMLに反映させるんですね。大変勉強になりました、ありがとうございました。
- ONEONE
- ベストアンサー率48% (279/575)
POSTした値があればテキストボックスを表示する、というようなロジックではだめですか？ 例えば下記。POSTの扱いについては省略しますので、適宜。 <?php if(isset($_POST[name''])): ?> <input type='text' name='name' value='<?php print($_POST['name'])?>' <?php endif; ?>
お礼
具体的なコードのご提示ありがとうございます。 ご提示頂いた方法ですと確かにDOM操作で追加したテキストボックスの値をサーバ側でコントロールできますね。 この場合、追加するinputタグの記述をDOM操作用のJavascript側とPOST後に表示用のPHP側の両方に持つ事になると思います。タグに修正が入った際は両方のソースに手を入れないといけなくなるのでメンテナンス性は下がると思うのですが、DOM操作を伴うWebサイトでは致し方ない事なのでしょうか？
- lv4u
- ベストアンサー率27% (1862/6715)
>>エラーとなって入力ページに戻った場合、入力時にDOM操作で増やしたテキストボックスは 消えてしまっているのですが、そのテキストボックスと値はどのように再現すればいいのでしょうか？ 一般的には、サーバ側のプログラムで、戻ったときに再現できるような処理をしておいてあげることになると思えます。 たぶんJavascriptもそういう処理ができるようなロジックにしておくことになると予想します。
お礼
早々にご回答頂きありがとうございます。 サーバ側で入力値を保持しておくのは分かるのですが、それをJavascriptでDOMの状態を再現するのが全くイメージできないのです。 サーバ側、クライアント側で具体的な処理方法をご存知でしたらご教示頂けないでしょうか？
お礼
ご教示頂きありがとうございました。 確かにクライアント側できっちり入力チェックをしていれば、サーバ側のチェックは故意の不正送信という事になり、不正送信ならば入力画面に戻す必要がないですね。 つまりそもそも質問内容にある処理は必要ないと。 有識者の方々に貴重なご意見を頂けて本当に勉強になります、ありがとうございます。