formの入れ子の回避方法

解決済

質問者：NORI-AYU
質問日時：2008/05/06 14:17
回答数：5件

アドバイス下さい。
<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件)

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

No.5ベストアンサー

回答者： steel_gray
回答日時：2008/05/07 14:09

再び#3です。

＞ページの左上から何ピクセル
ページの左上ではなく、
positiopn:relative;を指定した包括ブロック　の左上からの位置を指定します。

#3でいえば <div id="#F">の前に何を追加しても、
CSS(位置指定)の変更の必要はありません。

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
#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"を入れるということは出来ないのかなと思いまして。
お願いします。

通報する

お礼日時：2008/05/08 11:39

No.4

回答者： steel_gray
回答日時：2008/05/06 23:33

#3です。

空間を空けておいて、ブロックや要素を「重ねてしまおう」という手法です。
空間の空け方位置の指定は自由に設定できますが、
お礼欄のように場所を示して自動で「挿入」する事はできないのです。

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
なるほど。ということは、ページの左上から何ピクセルとかで指定するって事ですね。これなら可能っぽいですね。そのスペースの上下のボリュームが変わると重なっちゃうかもしれないですね。
ん～、どうしよう。

通報する

お礼日時：2008/05/07 10:24

No.3

回答者： steel_gray
回答日時：2008/05/06 17:02

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>

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
ちょっとやってみたのですが、今ひとつ理解できません。
もう少しアドバイス下さい。
例えば
<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">を埋め込むようなことは可能なのでしょうか？
お願いいたします。

通報する

お礼日時：2008/05/06 18:56

No.2

回答者： auty
回答日時：2008/05/06 15:10

先頭に改行が入りますが、

以下のコードを参考にしてみてください。
------------------------------------------------------------
<head>
<script type="text/javascript"></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 で
値を受け取ります。

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
非常に勉強になります。
今回はまずCSSで挑戦したいと思います。

通報する

お礼日時：2008/05/06 18:51

No.1

回答者： 15mm
回答日時：2008/05/06 15:00

<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に貼り付けてください。