DOM操作後の状態を再現するには
- PHPを使用したWebプログラミングにおいて、DOM操作後の状態を再現する方法について教えてください。
- 一般的なWebサイトの仕組みとして、テキストボックスに入力してサブミットし、入力チェックでエラーがあった場合には入力ページに戻ることがあります。
- しかし、JavascriptでDOMを操作してテキストボックスを追加した場合、エラー時にDOM操作で追加したテキストボックスが消えてしまいます。そのテキストボックスと入力値を再現する方法を教えてください。
- ベストアンサー
DOM操作後の状態を再現するには
PHPを使用したWebプログラミングを始めました。 基本的な事かもしれませんが、ご教示頂けますと幸いです。 テキストボックスに文字列を入力してサブミットし、サーバサイドの入力チェック処理で エラーとなった場合は入力ページに戻る、というのは一般的な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の状態を再現するのが全くイメージできないのです。 サーバ側、クライアント側で具体的な処理方法をご存知でしたらご教示頂けないでしょうか？
関連するQ&A
- WindowsからChromeのDOM操作
WSHからIEオブジェクトを作成してDOM操作の様な処理 をChromeでも可能でしょうか？ 出来ればネイティブ環境が好ましいですが、恐らく無理であろうなので 既存のエクステンションなどサードパーティ含めて可能性として教えて下さい。 具体的に得たいDOM操作としては ・ボタンなどWEBページ内の要素へのアクセスや遷移 ・readystateなどの読み込み状況の取得
- ベストアンサー
- その他（プログラミング・開発）
- お世話になります。「質問番号：6100202」と並行して、別の質問をさ
お世話になります。「質問番号：6100202」と並行して、別の質問をさせていただきます。 宜しくお願い致します。 IE8でdivのcontenteditable=trueでの擬似テキストボックス内と、通常テキストエリア内へ それぞれ任意の文字列を手入力した後で、 入力チェックエラーとして、別のページ画面（エラーメッセージ）を表示させて、 その画面上の[戻る]ボタンをクリックして、 元のページ画面へ戻すプログラムを作成して動かしてみたところ、 通常テキストエリア内へ任意の文字列を手入力した方は、 その任意の文字列の内容のままで残って正しく表示されましたが、 IE8でdivのcontenteditable=trueでの擬似テキストボックス内へ 任意の文字列を手入力した方は、 任意の文字列内容は無くなっていて、 その元のページ画面を、一番最初に開いた際の初期値（文字列）が表示されてしまいました。 そこでご質問内容ですが、 別のページ画面から、元のページ画面に戻った際に、 IE8でdivのcontenteditable=trueでの擬似テキストボックス内へ 任意の文字列を手入力した値を、キープして、 その任意の文字列の内容のまま残すには、 どのような方法がよいのでしょうか？
- ベストアンサー
- JavaScript
- [JS] htmlをパースしてdomにしたい
テキストのhtmlライクの構文があります。 これをパースして、dom構造のオブジェクトに変換したいです。 createElement("div")して、innerHTMLに入れる方法の場合、 IEではhtmlで定義されていないタグ名が無視されてしまうため、不可です。 xmlのパーサに食わせる方法の場合、 テキストが厳密にxml構文に沿っていないとエラーとなるので、 閉じタグ漏れがあるテキストを処理できないため、不可です。 パースする関数を作成するしかないかと思っています。 すでに誰かが作成していそうですが、探しても見つかりませんでした。 こうやって作った、とか、参考となるページなどありましたら教えてください。
- ベストアンサー
- JavaScript
- AxWebBrowserで開いたWebページを操作したいのですがコンボ
AxWebBrowserで開いたWebページを操作したいのですがコンボボックスの操作が上手くいきません。 Dim doc As mshtml.HTMLDocument doc = AxWebBrowser1.Document 'テキストボックス doc.all.item("text").innertext = "あああ" 'ラジオボタン doc.all.item("radio", 0).Checked = True テキストへの文字列の挿入とラジオボタンの制御はこれでできました。 環境はVB.NET 2005です。 どうか、よろしくお願いします。
- ベストアンサー
- Visual Basic
- VBAからWEB操作について
カテゴリがずれていたらすみません。 JavaScriptを使って作った（他社が作られたもの）WEBページがあり そのページの ”テキストボックスに文字を入れる”動きや ”オプションボタンをチェック”などの動きを ExcelのVBAから行っています。 テキストボックスの名前を知ろうとして ソースを表示させ、Nameの確認をしているのですが Nameが設定されていなかったりします。 こんなときはどのようにしてテキストボックスを指定すればよいのでしょうか？ その他プログラミングのカテゴリにも同じ趣旨の内容ですが VBAの角度からの質問をさせていただきました。 こんな風にすれば良いよなど、ありましたら幅広い回答お待ちしております。
- ベストアンサー
- JavaScript
- textboxユーザーコントロールのコピー&ペースト制御
VB.NETにてテキストボックスタイプのユーザーコントロールを作成中なのですが、 任意の場所からコピーしてきた文字列をテキストボックスにペーストする際、コピーした文字列のチェック行い、 入力制限したい文字が存在する場合、ペーストさせないような処理にしたいのですが、 良い方法は無いでしょうか？ よろしくお願いします。
- ベストアンサー
- Visual Basic
- DOMとjavascriptについて
javascriptとperlを駆使して、動的なホームページを作っています。 javascriptで動的にタグを生成してそれを参照したりするような処理を、書いていくと時々新しく生成したタグを参照できなくなったりします。ここにスクリプトを掲載することは出来ないんですが、ajax通信でサーバーとデータをやり取りし、何度もhtmlを書き換えるホームページを作っています。するとなぜだか新しく生成したタグが参照できなくなったりします。 他にはjqueryのappendメソッドで、タグを文字列として直接書き込んだ場合、タグをタグとして認識してくれないということもありました。 javascriptに原因があるのか、domに原因があるのか、それともテスト用のブラウザに使っているfirefoxの処理の仕方に原因があるのかわかりません。どなたか原因を知っている方がいらしたら是非ご教授ください。
- ベストアンサー
- JavaScript
- JAVA で入力された文字の・・・・
JAVAでＪＳＰのテキストボックスに入力された文字列に、「全角スペース、半角スペース、￥ｔ（タブ）、￥」が入っているかをチェックして、対象文字があれば削除する処理を行いたいのですが、どのようにすればよいのでしょうか？
- 締切済み
- Java
- uwsc webページ内のテキストボックス
みなさんこんばんわ。 uwscを使ってwebページ内の検索などのテキストボックスにカーソルを置きたいのです。 KBDで文字を打ち込めるようにテキストボックスを編集状態にするにはどうすれば教えてください。 具体的には、 私の会社の日報システム(html)で日報を入れる日付テキストボックスがあるのですが、日付のテキストボックスだけvalueで値を入力しても元に戻ってしまうのです。html解析スクリプトで調べると、outerhtmlと書いてあり、何か動的に書き変わるしかけがあるようなのですがよくわかりません。しかたがないのでKBDで日付を入力しています。domというのでしょうか、ie.doc.elements(i).value="yyyy/mm/dd"のようにテキストボックスを指定して直接値を入力できればベストなのですが… よろしくお願いします。
- ベストアンサー
- その他（プログラミング・開発）
- VB.NETのWEBアプリでテキストボックスにHTMLなどのタグを入れ
VB.NETのWEBアプリでテキストボックスにHTMLなどのタグを入れてしまうとエラーになりますよね・・・ でもどうしてもタグを使いたい場合はどうしたらいいのでしょうか？ 出来ればいいのは一応限られてはいますが・・・ たとえば強調文字、文字色、ハイパーリンクができれば十分かなと思っています。 テキストボックスにタグが入った状態で操作するとエラーページになってしまいますがASP.NETのエラーページの見栄えが嫌いなので（ていうかユーザーがびっくりしちゃうので・・・）事前にタグを見つけるなんてことは可能でしょうか？
- ベストアンサー
- Microsoft ASP
お礼
ご教示頂きありがとうございました。 確かにクライアント側できっちり入力チェックをしていれば、サーバ側のチェックは故意の不正送信という事になり、不正送信ならば入力画面に戻す必要がないですね。 つまりそもそも質問内容にある処理は必要ないと。 有識者の方々に貴重なご意見を頂けて本当に勉強になります、ありがとうございます。