- ベストアンサー
フォーム画面での処理についてです
私は、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をクリックしたときに値が元ページに送られていたので、作りたいものに近付けるかと思います。 ありがとうございました。
お礼
やはり基礎が大事ですね。 ヒントをいただけてうれしく思います。 ありがとうございました。