フォーム画面での処理についてです

解決済

質問者：nfwkm331
質問日時：2009/12/09 21:51
回答数：6件

私は、windows環境でPHPを使って、サイトを構築しています。
JavaScriptに関してはJqueryを多少使ったことがある程度です。

調べてもよくわからなかったものがいくつかあるので、ご存知の方がいましたら、どれか１つでも教えて頂きたいです。
知りたい内容は以下の３点です。

１、フォームの入力欄をクリックするとその入力欄が浮かび上がり、入力してSubmitボタンを押すと元のページに値が反映される処理（Jqueryのlightpopを使ってみましたが、うまく値が送れませんでした。）

２、フォームの入力欄を増やしたり、減らしたりする処理

３、フォームの入力欄の順番を入れ替える処理（矢印などをつけて入れ替えたいです）

情報が不足していましたらご指摘ください。
宜しくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (6件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： yyr446
回答日時：2009/12/10 10:03

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 」とか
があるので、自分で作りこむ手間が省けますが、使いこなすには
やはり、基礎知識が必要となります。

- 0
- 件

通報する

この回答へのお礼

やはり基礎が大事ですね。
ヒントをいただけてうれしく思います。

ありがとうございました。

通報する

お礼日時：2009/12/11 00:14

No.6

回答者： babu_baboo
回答日時：2009/12/10 21:00

＃１と＃３です。

＞（それにしてもそんなやつをいっぱい見かけるのですが）
たしかにおおいね。じぶんもひとのこといえませんが。

いや～かこに、すごいひとにしてきされてね。
いつか、ちゃんすがあったら、だれかにやろうとおもってね。^^;

そのちゃんす、こんどは、yyr446さんにぷれぜんと。
あと、<script>とか<style>にtypeぞくせいをつけないひとにも、
いけるよ！

あと、<html>だけですませるひと。
あと、<title>がないひと。
あと、<img>にaltをはぶいてるひと。
あと、ちゃんとせんげんすれば、<head>とかしょうりゃくできるのを
しらないひと
などなど。

- 0
- 件

通報する

No.5

回答者： yyr446
回答日時：2009/12/10 20:42

No2です。

確かにHTML4.01 Strictのルールでは、
<form>の下に直接インライン要素をおくのは×だったんですね
失礼しました。
（それにしてもそんなやつをいっぱい見かけるのですが）

- 0
- 件

通報する

No.4

回答者： yyr446
回答日時：2009/12/10 20:19

No.2です。

（この質問の回答じゃないけど）
「いんらいんようそをいきなり
form_elm.appendChild(input_elm); 」
って普通はだめだったんですね。
改行されないだけだと思ってたんですけど．．．．
子の方にinsertBefore()も同じでしょうね

- 0
- 件

通報する

No.3

回答者： babu_baboo
回答日時：2009/12/10 19:54

＃１です。

</p>
</form>
が、ぬけてました。ごめんなさい。

いんらいんようそをいきなり
form_elm.appendChild(input_elm);
するのは、・・・・・。

- 0
- 件

通報する

No.1

回答者： babu_baboo
回答日時：2009/12/10 04:28

なんとなく１にかいとう。

でも、まちがいがいっぱいありそう。
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>