- ベストアンサー
フォーム画面での処理についてです
私は、windows環境でPHPを使って、サイトを構築しています。 JavaScriptに関してはJqueryを多少使ったことがある程度です。 調べてもよくわからなかったものがいくつかあるので、ご存知の方がいましたら、どれか１つでも教えて頂きたいです。 知りたい内容は以下の３点です。 １、フォームの入力欄をクリックするとその入力欄が浮かび上がり、入力してSubmitボタンを押すと元のページに値が反映される処理（Jqueryのlightpopを使ってみましたが、うまく値が送れませんでした。） ２、フォームの入力欄を増やしたり、減らしたりする処理 ３、フォームの入力欄の順番を入れ替える処理（矢印などをつけて入れ替えたいです） 情報が不足していましたらご指摘ください。 宜しくお願いします。
- nfwkm331
- お礼率30% (6/20)
- JavaScript
- 回答数6
- ありがとう数4
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
1.については何故うまく出来なかったのかこれだけでは解りません。 2.については、DOM要素を操作する関数で実現します。 例えば、 <form id="hoge"> <input type="text"> </form> といったform要素があったとして、 var form_elm=document.getElementById("hoge"); でform要素を取得します。 追加したい要素は var input_elm=document.createElement('input'); input_elm.setAttribute("type","text"); input_elm.setAttribute("value","xxx"); あるいは、 var div_elm=document.createElement('div'); div_elm.inneHTML='<input type="text" value="xxx">' のように作ります、作った要素を親であるform要素に form_elm.appendChild(input_elm); form_elm.appendChild(div_elm); みたいに追加するのです。こおいったDOMのメソッドやプロパティ 操作は他にもいろいろあります。 3.については2の応用で、移動したい要素を取得した上で、削除し 別の場所に追加するといった処理になります。 矢印については、ホバー時にCSSの"cursor:"属性で矢印画像を要素にセッ トすれば、実現できます。 まず、簡単な物をJAVASCRIPTだけで作ってみましょう。 そうすれば、理解が深まりライブラリーの使い方もわかります。 ちなみに2.なんてjQuery使えば1行ですみますし、3.についても jQuery UIライブラリーに「draggable 」とか「droppable 」とか があるので、自分で作りこむ手間が省けますが、使いこなすには やはり、基礎知識が必要となります。
その他の回答 (5)
- babu_baboo
- ベストアンサー率51% (268/525)
＃１と＃３です。 ＞（それにしてもそんなやつをいっぱい見かけるのですが） たしかにおおいね。じぶんもひとのこといえませんが。 いや～かこに、すごいひとにしてきされてね。 いつか、ちゃんすがあったら、だれかにやろうとおもってね。^^; そのちゃんす、こんどは、yyr446さんにぷれぜんと。 あと、<script>とか<style>にtypeぞくせいをつけないひとにも、 いけるよ！ あと、<html>だけですませるひと。 あと、<title>がないひと。 あと、<img>にaltをはぶいてるひと。 あと、ちゃんとせんげんすれば、<head>とかしょうりゃくできるのを しらないひと などなど。
- yyr446
- ベストアンサー率65% (870/1330)
No2です。確かにHTML4.01 Strictのルールでは、 <form>の下に直接インライン要素をおくのは×だったんですね 失礼しました。 （それにしてもそんなやつをいっぱい見かけるのですが）
- yyr446
- ベストアンサー率65% (870/1330)
No.2です。（この質問の回答じゃないけど） 「いんらいんようそをいきなり form_elm.appendChild(input_elm); 」 って普通はだめだったんですね。 改行されないだけだと思ってたんですけど．．．． 子の方にinsertBefore()も同じでしょうね
- babu_baboo
- ベストアンサー率51% (268/525)
＃１です。 </p> </form> が、ぬけてました。ごめんなさい。 いんらいんようそをいきなり form_elm.appendChild(input_elm); するのは、・・・・・。
- babu_baboo
- ベストアンサー率51% (268/525)
なんとなく１にかいとう。 でも、まちがいがいっぱいありそう。 test.htmlからtest1.htmlを === test.html === <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> <body> <form id="test"> <p> <input type="text" name="ab" value="123"> <input type="text" name="cd" value="XYZ"> <input type="button" value="ef" onClick="window.open(makeURL('test1.html','ab','cd'))"> </p> <p> <input type="text" name="ef" value=""> <input type="text" name="gh" value=""> <script type="text/javascript"> function makeURL( file, element0 ) { var rst = [ ]; var cnt = 1; var tgt; while( tgt = arguments[ cnt++ ] ) { rst.push( encodeURIComponent( tgt ) + '=' + encodeURIComponent( getValue( tgt ) || '' ) ); } return file + ( rst.length == 0 ? '': '?' + rst.join( '&' )); } function getValue ( inpName ) { var d = document; var counter = 0; var elements = d.getElementsByName( inpName ) || [ d.getElementById( inpName ) ]; var e; while( e = elements[ counter++ ] ) { switch( e.type ) { case 'hidden' : case 'submit': case 'text': case 'button' : case 'reset' : case 'textarea': return e.value; break; case 'checkbox': case'radio': if( e.checked ) return e.value; break; case 'select-one': // case 'select-multiple': var cnt = 0, o; while( o = e.options[ cnt++ ] ) if( o.selected ) return e.value; break; default: } } return null; } </script> ===== test1.html ===== <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST1</title> <body> <form id="ab"> <p> <input type="text" name="ab" value=""> <input type="text" name="cd" value=""> <input type="button" value="close" onClick="closeWin()"> </p> <script type="text/javascript"> function closeWin() { var w = window.opener; if( w ) { setFormValue( w.document, 'ef', '===' + getValue( 'ab' ) + '===' ); setFormValue( w.document, 'gh', '===' + getValue( 'cd' ) + '===' ); window.close(); } } function getLocation () { var par = location.search.substring(1).split( '&' ); var cnt = 0, pac, nv, ret = [ ]; while( pac = par[ cnt++ ] ) { nv = pac.split( '=' ); ret[ decodeURIComponent( nv[0] ) ] = decodeURIComponent( nv[1] ); } return ret; } function setFormValue ( d, name, val ) { var i = 0, j = 0, o, p; var objs = d.getElementsByName( name ); if( 0 === objs.length ) objs = [ d.getElementById( name ) ]; while( p = objs[ i++ ] ) switch( p.type ) { case 'text': case 'textarea': case 'button': case 'reset': case 'submit': case 'hidden': p.value = val; break; case 'checkbox': p.checked = val; break; case 'radio': p.checked = ( p.value == val ); break; case 'select-one': case 'select-multiple': while( o = p.options[ j++ ] ) o.selected = ( o.value == val ); default: } } function getValue ( inpName ) { var d = document; var counter = 0; var elements = d.getElementsByName( inpName ) || [ d.getElementById( inpName ) ]; var e; while( e = elements[ counter++ ] ) { switch( e.type ) { case 'hidden' : case 'submit': case 'text': case 'button' : case 'reset' : case 'textarea': return e.value; break; case 'checkbox': case'radio': if( e.checked ) return e.value; break; case 'select-one': // case 'select-multiple': var cnt = 0, o; while( o = e.options[ cnt++ ] ) if( o.selected ) return e.value; break; default: } } return null; } var v = getLocation(); var k; for( k in v ) { setFormValue( document, decodeURIComponent( k ), decodeURIComponent( v[k] ) ); } </script>
お礼
コードまで書いていただきありごとうございます。 勉強不足で完璧には理解できてないですが、Closeをクリックしたときに値が元ページに送られていたので、作りたいものに近付けるかと思います。 ありがとうございました。
関連するQ&A
- PHPでフォームに自動入力
PHP初心者です。 (1)フォームに手入力しsubmit (2)手入力の内容をファイルに保管 (3)よそのサーバのフォームを開きユーザ名/パスワードを入力しsubmit (4)パスワード入力後に展開されるフォーム(https)に(1)の手入力の内容を入力しsubmit (5)"(4)"でsubmitした結果で次に表示するフォームを決定したい submitした結果はフォームに正常/エラーが表示されます 自サーバのWebフォームに入力された内容を他のサーバに反映したい。 サーバへの反映結果で次処理を変えたい。 他のサーバに反映させる手段はWebの入力フォームのみとなっています。 (3)(4)(5)をサーバで動作するPHPで自動的（トリガーは(1)）に行いたいです。 (3)(4)(5)の実装方法をどなたかご伝授いただけないでしょうか。 サンプルのソースがあればありがたいです。 linuxサーバ（Fedora) PHP 5 質問内容が大きすぎ申し訳ないですが伝授いただけないでしょうか。
- 締切済み
- PHP
- 文字コードエスケープ処理について
現在MYSQLとPHPを使ってデータベースを構築してます。 XSSやSQLインジェクションはフォームなどに悪意のユーザがJavascriptのコードを入力するんですよね？ ちょっとテストで検索フォームに Javascriptコード を入力してみたんですが何も起こりませんでした。これは処理がされていると思って良いんでしょうか？URLは画像のようになりました。
- 締切済み
- PHP
- 入力フォームからconfig.phpを変更したい
こんにちは。 PHPで作った入力フォームから、 --config.php-- $test = '○○'; の○の部分（変数の値）を変更したいのですが、 どうすればよいでしょうか？ 予定としては、 admin.phpに入力フォームを埋め込み、そこの入力フォームに入力されたものをsubmitすると、config.phpの 変数の値が変更されるという風にしたいのです。 例 1.入力フォームに"test"と入力されました。 2.それをsubmitしました。 3.すると、config.phpの変数$test が、$test = 'test'; に変更される。 どなたかお願いします！
- 締切済み
- PHP
- htmlspecialcharsを使ったエスケープ処理
APIを使ってPHPでWEBサイトを構築しているのですが htmlspecialcharsを使ったエスケープ処理はいつ行うべきなのでしょうか？ フォームから入力された値だけでよいのでしょうか？？ いまいち理解していないのでアドバイスお願いします。
- ベストアンサー
- PHP
- 入力フォームの値が変化したらSubmit
たとえばVBでのイベント Sub TextBox1_Change() のように、入力フォームのテキストボックスの値が変化したらSubmitあるいは、それをトリガとしてPHPの処理を開始させることは可能でしょうか。
- ベストアンサー
- PHP
- フォームの入力例を表示する件
jqueryでフォームに何を入力すればいいかを明確にするために下記URLの ソースで試してみました。 http://manuelboy.de/projekte/jquery-formtips/index.php 例は表示されるのですが、そのまま送信ボタンをクリックすると空ではなく 入力例として表示している文字がpostされてしまうようです。 入力チェックはphpで行っています。 教えてgooの質問フォームのように何も入力していなければエラーとしたいのですが そのようなライブラリはありますでしょうか？ htmlのsubmitは下記のようにしています。 <input type="image" src="btn_conf.jpg" alt="入力内容を確認" id="submit" name="submit" onclick="this.form.submit(); return false;" />
- ベストアンサー
- JavaScript
- chromeでフォームの値が取得できない
PHPでフォームに入力された値を取得して画面に表示させる処理において、 Javascriptでフォームの値を変更した場合、chromeだと変更後の値が 取得できません。 例えば、 <form name="form" method="post" action="index.php"> <input type="checkbox" name="chk1" value="111"> <input type="hidden" name="data1" value="AAA"> <input type="submit" value="送信"> </form> というようなフォームがあったとして、Javascriptで値を <form name="form" method="post" action="index.php"> <input type="checkbox" name="chk1" value="222"> <input type="hidden" name="data1" value="BBB"> <input type="submit" value="送信"> </form> と、変更しても送信ボタンを押して取得できる値は、上の方の値になります。 IEやFireFoxでは問題なく変更後の値が取得できるのですが、chromeだと 取得できません。 なにか解決方法があるのか、それともchromeの仕様なのかご教示いただければと 思います。 どうかよろしくお願いいたします。
- 締切済み
- JavaScript
- PHP プルダウンを選んだ瞬間に処理開始
PHPで、フォームのプルダウンを選んだ時、たとえば、「1月」を選んだ時に処理を開始し、選択されている1月のデータだけをデータベースからとってきて表示したいです。 <input type="submit" ～> の送信ボタンで送信するわけではなく、プルダウンを選んだ瞬間に処理開始したいので、$_POST[]では取得できませんでした。 PHPでプルダウンを選んだ瞬間にプルダウンのデータを送信する方法があれば教えてください。 PHPは現在勉強中の超初心者、javascriptはjQueryなら少々書ける程度です。 よろしくお願いいたします。
- ベストアンサー
- PHP
- フォームで条件によってボタンの処理を変える
フォームでパスワードを入力してもらい、確認用にもう一度入力した際、 誤入力があればアラート、正しく同じ値が入力されればsubmitにしたいと思っており、下記のようなコードを書きましたが、同じ値を入力した際にIEでエラーがでてしまいます（FirefoxやSafariでは動きます）。 当方Javascriptの知識に乏しく、どなたか助けていただけませんでしょうか？宜しくお願いいたします。 <html> <script language="JavaScript"> <!-- function passCheck(){ pass1 = document.free.PASSWORD.value; pass2 = document.free.PASSWORD2.value; if(pass1!==pass2) {alert("入力された確認用パスワードが違います");} else if(pass1==pass2) {document.free.submit.type="submit";} } //--> </script> <body> <form method="POST" action="submit.cgi" name="free"> <p> <input type="password" size="20" name="新パスワード" id="PASSWORD"><br> <input type="password" size="20" name="新パスワード（確認）" id="PASSWORD2"> </p> 確認のため、上記と同じパスワードをご記入ください。 <p><input type="button" name="submit" value="確認する" onclick="passCheck()"/></p> </form> </body> </html>
- ベストアンサー
- JavaScript
- javascriptとフォーム
javascriptでフォームに入力した値を別ウィンドウにプレビューとしてその内容を自動生成して表示させたいのですが、やり方を教えて下さい。 この場合、すでにフォームタグがあり、submitボタンなどが存在している過程でお願いします。 自動生成する内容はtextareaのものです。
- 締切済み
- JavaScript
お礼
やはり基礎が大事ですね。 ヒントをいただけてうれしく思います。 ありがとうございました。