- ベストアンサー
formの入れ子の回避方法
アドバイス下さい。 <form method="post" name="addForm" id="addForm" action="aaa.php"> <input type="text" name="textA" id="textA"> <form method="post" name="uploadFormA" id="uploadFormA" enctype="multipart/form-data" action="aaa.php"> <input type="text" name="text1" id="text1"> <input type="file" name="upload_fileA" id="upload_fileA"> <input type="button" value="アップロード"> </form> <form method="post" name="uploadFormB" id="uploadFormB" enctype="multipart/form-data" action="aaa.php"> <input type="text" name="text2" id="text2"> <input type="file" name="upload_fileB" id="upload_fileB"> <input type="button" value="アップロード"> </form> <form method="post" name="uploadFormC" id="uploadFormC" enctype="multipart/form-data" action="aaa.php"> <input type="text" name="text3" id="text3"> <input type="file" name="upload_fileC" id="upload_fileC"> <input type="button" value="アップロード"> </form> <input type="text" name="textB" id="textB"> <input type="submit" value="送信"> </form> のような、formが入れ子になってしまっているformがあります。 これを回避する方法を教えていただきたいです。 条件としては、 ・見た目はこの順番がいい。 ・javascript、CSS等なんでも良いです。 ・各「アップロード」ボタンで、text1,2,3,4、upload_fileA,B,C,Dを送信、「送信」ボタンでtextA,Bを送信したい。 以上、お願いいたします。
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
再び#3です。 ＞ページの左上から何ピクセル ページの左上ではなく、 positiopn:relative;を指定した包括ブロック の左上からの位置を指定します。 #3でいえば <div id="#F">の前に何を追加しても、 CSS(位置指定)の変更の必要はありません。
その他の回答 (4)
- steel_gray
- ベストアンサー率66% (1052/1578)
#3です。 空間を空けておいて、ブロックや要素を「重ねてしまおう」という手法です。 空間の空け方位置の指定は自由に設定できますが、 お礼欄のように場所を示して自動で「挿入」する事はできないのです。
お礼
ありがとうございます。 なるほど。ということは、ページの左上から何ピクセルとかで指定するって事ですね。これなら可能っぽいですね。そのスペースの上下のボリュームが変わると重なっちゃうかもしれないですね。 ん～、どうしよう。
- steel_gray
- ベストアンサー率66% (1052/1578)
CSSだけで見た目を入替える方法（概念） <html> <head> <title></title> <style type="text/css"> form {margin:0;}/*たんに、邪魔なので0に*/ #F { padding-top:1.4em;/*2番目のフォームのT1を表示するスペースを空ける*/ position:relative;/* #T1を配置する時に基点となるために必要 */ } #T1 { position:absolute; /* 絶対配置 但し基点は#Fとなる*/ top:0;left:0;/* #F上左端からの位置 */ } </style> </head> <body> <div id="F"> <form id="F1"><input type="file"></form> <form id="F2"><input type="text" id="T1" value="A"><input type="text" value="B"></form> </div> </body> </html>
お礼
ありがとうございます。 ちょっとやってみたのですが、今ひとつ理解できません。 もう少しアドバイス下さい。 例えば <form method="post" name="addForm" id="addForm" action="aaa.php"> <input type="text" name="textA" id="textA"> <div id="UF1"></div> <input type="text" name="textB" id="textB"> <input type="submit" value="送信"> </form> <div id="UFM1"> <form method="post" name="uploadFormA" id="uploadFormA" enctype="multipart/form-data" action="aaa.php"> <input type="text" name="text1" id="text1"> <input type="file" name="upload_fileA" id="upload_fileA"> <input type="button" value="アップロード"> </form> </div> の場合で、<div id="UF1"></div>に<div id="UFM1">を埋め込むようなことは可能なのでしょうか？ お願いいたします。
- auty
- ベストアンサー率58% (284/486)
先頭に改行が入りますが、 以下のコードを参考にしてみてください。 ------------------------------------------------------------ <head> <script type="text/javascript"><!-- function set_textAhidden(e) { document.getElementById('textAhidden').value = e.value; } //--></script> </head> <body> <input type="text" name="textA" id="textA" onchange="set_textAhidden(this);"> <form method="post" name="uploadFormA" id="uploadFormA" enctype="multipart/form-data" action="aaa.php"> <input type="text" name="text1" id="text1"> <input type="file" name="upload_fileA" id="upload_fileA"> <input type="submit" value="アップロード"> </form> <form method="post" name="uploadFormB" id="uploadFormB" action="aaa.php"> <input type="text" name="text2" id="text2"> <input type="file" name="upload_fileB" id="upload_fileB"> <input type="submit" value="アップロード"> </form> <form method="post" name="uploadFormC" id="uploadFormC" action="aaa.php"> <input type="text" name="text3" id="text3"> <input type="file" name="upload_fileC" id="upload_fileC"> <input type="submit" value="アップロード"> </form> <form method="post" name="addForm" id="addForm" action="aaa.php"> <input type="hidden" name="textAhidden" id="textAhidden"> <input type="text" name="textB" id="textB"> <input type="submit" value="送信"> </form> ------------------------------------------------------------ この場合サーバ側では、 textAhidden と textB で 値を受け取ります。
お礼
ありがとうございます。 非常に勉強になります。 今回はまずCSSで挑戦したいと思います。
- 15mm
- ベストアンサー率65% (65/100)
<script type="text/javascript"><!-- function dummy(){ document.getElementById('textA').value=document.getElementById('textAdummy').value; document.getElementById('addForm').submit();} //--></script> <form method="post" name="dummyForm" id="dummyForm" action="aaa.php" onsubmit="dummy();return false;"> <input type="text" name="textAdummy" id="textAdummy" onchange="document.getElementById('textA').value=this.value;"> </form> <form method="post" name="uploadFormA" id="uploadFormA" enctype="multipart/form-data" action="aaa.php"> uploadFormA～C省略 </form> <form method="post" name="addForm" id="addForm" action="aaa.php"> <input type="hidden" name="textA" id="textA"><input type="text" name="textB" id="textB"> <input type="submit" value="送信"> </form> dummyFormを見かけ上addFormと連動させてみました。 ・dummyFormの textAdummy が変更されると textA（hidden）に反映。 ・dummyFormが送信されそうになったらaddFormを送信。 といった感じです。 テキストボックスの配置がこうなっていましたが、 □□□ □□ □□ □ ブラウザの互換性の問題ではなくもともとこれを望んでいたのなら style="display:inline;" をdummyFormとuploadFormAに貼り付けてください。
お礼
ありがとうございます。 非常に勉強になります。 今回はまずCSSで挑戦したいと思います。
お礼
ありがとうございます。 #3で頂いた例ですと、<div id="#F">でスペースを空けそこにid="T1"を入れるという感じですよね。 ということは、例えば、#3の変形で <body> TEXT TEXT TEXT <div id="F"></div> MEMO MEMO MEMO <form id="F1"> <input type="file"> <input type="text" value="A"> </form> </body> </html> で、<div id="F">でスペースを開けそこにid="F1"を入れるということは出来ないのかなと思いまして。 お願いします。