こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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を送信したい。
以上、お願いいたします。

投稿日時 - 2008-05-06 14:17:49

QNo.4001573

すぐに回答ほしいです

質問者が選んだベストアンサー

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

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

投稿日時 - 2008-05-07 14:09:34

お礼

ありがとうございます。
#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:47

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(5)

ANo.4

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

投稿日時 - 2008-05-06 23:33:26

お礼

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

投稿日時 - 2008-05-07 10:24:48

ANo.3

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>

投稿日時 - 2008-05-06 17:02:17

お礼

ありがとうございます。
ちょっとやってみたのですが、今ひとつ理解できません。
もう少しアドバイス下さい。
例えば
<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:44

ANo.2

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

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

投稿日時 - 2008-05-06 15:10:02

お礼

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

投稿日時 - 2008-05-06 18:51:19

ANo.1

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

投稿日時 - 2008-05-06 15:00:17

お礼

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

投稿日時 - 2008-05-06 18:50:24

あなたにオススメの質問