DOM操作後の状態を再現するには

Question

PHPを使用したWebプログラミングを始めました。
基本的な事かもしれませんが、ご教示頂けますと幸いです。

テキストボックスに文字列を入力してサブミットし、サーバサイドの入力チェック処理で
エラーとなった場合は入力ページに戻る、というのは一般的なWebサイトの仕組みかと思います。

上記入力ページで、JavascriptでDOMを操作してテキストボックスを一つ追加したとします。

２つのテキストボックスに文字列を入力してサブミットし、サーバサイドの入力チェック処理で
エラーとなって入力ページに戻った場合、入力時にDOM操作で増やしたテキストボックスは
消えてしまっているのですが、そのテキストボックスと値はどのように再現すればいいのでしょうか？

b0a0a · Accepted Answer

そもそもいきなりサブミットするのはよくありません。
まず、クライアントサイドでチェック＋もしDB参照がいるならAjaxで問い合わせをして、それでOKならサブミット、NGならそのページのままでエラーを表示します。
そうすればサブミット時にNGになるのは、故意に無理矢理不正な値を送信した場合のみですので、単にエラーページを表示するだけでよくなるのです。
ページの遷移やはなるべく抑えなければなりません。抑えれば抑えるほど構造が簡単になります。

lv4u · Answer

No.6です。ちょっと訂正

concrete5はフレームワークというより、WordPressのようなＣＭＳソフトといったほうが正しいですね。

lv4u · Answer

>>この問題を回避できるようなPHPフレームワークをご存知でしたら、ぜひご紹介下さい。

うーん、そういうDOMの問題を解決しようというのじゃあなく、「楽してＷｅｂサイトを作りたい、PHPやJavascriptをできるだけいじりたくない」という基準で、私は、Concrete5っていうフレームワークを選んで使っています。
このフレームワークを使い、カスタマイズして企業で商用利用されているところもあるようです。

ONEONE · Answer

バリデーションチェックをajaxで行う方法も一案かな思います。

ページ遷移しなくて済むので、動的に追加したパーツも消えません。

lv4u · Answer

>>タグに修正が入った際は両方のソースに手を入れないといけなくなるのでメンテナンス性は下がると思うのですが、DOM操作を伴うWebサイトでは致し方ない事なのでしょうか？

メンテナンス低下は、仕方ないでしょう。それを問題とする方たちは、その苦労が減るようなフレームワークを探したり、ソースの自動生成の仕組みを考えたりするのだと思います。

babu_baboo · Answer

<?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>

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>

ONEONE · Answer

POSTした値があればテキストボックスを表示する、というようなロジックではだめですか？

例えば下記。POSTの扱いについては省略しますので、適宜。

<?php if(isset($_POST[name''])): ?>
<input type='text' name='name' value='<?php print($_POST['name'])?>'
<?php endif; ?>

lv4u · Answer

>>エラーとなって入力ページに戻った場合、入力時にDOM操作で増やしたテキストボックスは
消えてしまっているのですが、そのテキストボックスと値はどのように再現すればいいのでしょうか？

一般的には、サーバ側のプログラムで、戻ったときに再現できるような処理をしておいてあげることになると思えます。
たぶんJavascriptもそういう処理ができるようなロジックにしておくことになると予想します。

DOM操作後の状態を再現するには

そもそもいきなりサブミットするのはよくありません。

No.6です。

>>この問題を回避できるようなPHPフレームワークをご存知でしたら、ぜひご紹介下さい。

バリデーションチェックをajaxで行う方法も一案かな思います。

>>タグに修正が入った際は両方のソースに手を入れないといけなくなるのでメンテナンス性は下がると思うのですが、DOM操作を伴うWebサイトでは致し方ない事なのでしょうか？

<?php

POSTした値があればテキストボックスを表示する、というようなロジックではだめですか？

>>エラーとなって入力ページに戻った場合、入力時にDOM操作で増やしたテキストボックスは

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング