動的に生成されたinput要素のサーバー側での取得

InternetExplorerでのHTML5未対応から、Form外の<input form>要素の取得が不可能なため、以下のようなソースを作成しました。

テーブルの１行に１送信ボタンがあるhtmlソース

html
1<table>
2	<tr>
3		<td>お名前</td>
4		<td>ご住所</td>
5		<td>送信ボタン</td>
6	</tr>
7	<tr>
8		<td><input name="name" type="text" form="hogehoge1"></td>
9		<td><input name="address" type="text" form="hogehoge1"></td>
10		<td>
11			<form id="hogehoge1" action="fuga.php" method="post">
12				<input class="submit_btn" type="submit" value="送信">
13			</form>
14		</td>
15	</tr>
16	<tr>
17		<td><input name="name" type="text" form="hogehoge2"></td>
18		<td><input name="address" type="text" form="hogehoge2"></td>
19		<td>
20			<form id="hogehoge2" action="fuga.php" method="post">
21				<input class="submit_btn" type="submit" value="送信">
22			</form>
23		</td>
24	</tr>
25</table>

JavaScriptソース（jQueryを利用しています）

js
1$(document).ready(function()
2{
3	//送信ボタンが押されたときのドリブン
4	$(".submit_btn").on("click", function()
5	{
6		var form = $(this).parents("form");// ボタンを内包している親formを取得
7		var formName = form.attr("id");// フォームの名前（ID）を取得
8
9		//input要素で、form名が同一なものを取得しつつそのinput部品数だけform内へinput（hidden）要素を作成
10		$("input[form='" + formName + "']").each(function()
11		{
12			//上で取得したform内部へ、同名のinput部品の作成
13			form.append("<input type='hidden' name='" + $(this).attr("name") + "' value='" + $(this).val() + "'>");
14		});
15	});
16});

以上でJavaScriptの最後に「return false;」で処理を止め、console.logで確認したところ、どうにかformタグ内部へ所定のデータを収めることができました。
ここで今度はサーバー側（php）でデータを確認したところ

php
1array(
2	'name' => '',
3	'address' => ''
4)

と、データが送られてきません。
何が問題なのかさっぱり手詰まってしまったので、気になったことありましたらご指摘お願いします。

追記：
あれ？？！
すいません。
今このコードで行ったら動いてます・・・
今書いているソースコードを極力シェイプして書いたんですが、この状態だと実際動かしたら動いてました。
実際はCakePHPで動かしているので、他のなにかが悪さしているのかもしれません。
ちょっと問題部分もう少し悩んでみますm(_ _)m

退会済みユーザー

2018/08/08 03:55

html5js 使っても対応できん？

urdapple

2018/08/08 04:06

こんなAPIあったんですね！？ちょっと導入検討してみますm(_ _)m

urdapple

2018/08/08 06:26

html5.js（html5shiv）はHTML5が効かないブラウザにHTML5のタグが使えるようにするためのポリフィルライブラリなので、form属性とかには効いてくれませんでした。残念・・・

行動規範の内容に同意します

回答4件

html
1<?php
2ini_set('display_errors', true);
3error_reporting(E_ALL);
4
5var_dump($_POST);
6?><!DOCTYPE HTML>
7<html lang="ja">
8	<head>
9		<meta charset="UTF-8">
10		<title></title>
11	</head>
12	<body>
13		<table>
14			<tr>
15				<td>お名前</td>
16				<td>ご住所</td>
17				<td>送信ボタン</td>
18			</tr>
19			<tr>
20				<td><input name="name" type="text"></td>
21				<td><input name="address" type="text"></td>
22				<td>
23					<form id="hogehoge1" action="" method="post">
24						<input class="submit_btn" type="button" value="送信">
25					</form>
26				</td>
27			</tr>
28			<tr>
29				<td><input name="name" type="text"></td>
30				<td><input name="address" type="text"></td>
31				<td>
32					<form action="" method="post">
33						<input class="submit_btn" type="button" value="送信">
34					</form>
35				</td>
36			</tr>
37		</table>
38		<script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
39		<script type="text/javascript">
40			$(function () {
41				$(".submit_btn").on('click', function () {
42					var tr = $(this).parents('tr');
43
44					$(this).html($('<input>').prop({
45						type: 'hidden'
46						, name: 'name'
47					}).val(tr.find('input[name=name]').val()));
48
49					$(this).append($('<input>').prop({
50						type: 'hidden'
51						, name: 'address'
52					}).val(tr.find('input[name=address]').val()));
53
54					$(this).parents('form').submit();
55				});
56			});
57		</script>
58	</body>
59</html>

投稿2018/08/08 04:15

退会済みユーザー

総合スコア0

動いているように見えますが一応こんなかんじ

javascript
1$(function(){
2  $("form").on("submit", function(e){
3    var self=$(this);
4    $("input").filter(function(){return $(this).attr("form")==self.attr("id")}).clone().css({display:"none"}).appendTo(self);
5    //e.preventDefault();
6  });
7});

投稿2018/08/08 03:57

yambejp

総合スコア114829

自己解決

すみません。
問題のソースだけであれば問題なく動いていました。

InternetExplorerではinputタグのrequired属性が効かないのですが、そのためのポリフィルライブラリの「webshim.js」に問題があるったようです。
webshim.jsを読み込まなくしたら、問題なく動きました。
しかしそうすると、今度は「required」属性が効かないのをどうするか問題が出てきてしまったんですよね。
ホントもう、IEイヤです＿|￣|○＜お騒がせしました

投稿2018/08/08 06:31

urdapple

総合スコア83

x_x

2018/08/08 06:49

IE10からrequired属性に対応していますよ。どこまで古いものに対応するつもりなのでしょうか？

urdapple

2018/08/08 07:13

あ、そうか、効いてます。効いてますね。だけど、Form属性に対応していないんで、Formの外のForm属性の付いたinput要素に効かないんですよ＿|￣|○

行動規範の内容に同意します

input要素がform要素の内側にないので、辿れないのは至極当たり前のことではないかと。

    <tr>
        <form id="hogehoge1" action="fuga.php" method="post">
	        <td><input name="name" type="text" form="hogehoge1"></td>
	        <td><input name="address" type="text" form="hogehoge1"></td>
	        <td>
                <input class="submit_btn" type="submit" value="送信">
	        </td>
        </form>
    </tr>

っていう構造になるものなんじゃないでしょうか。
（tr要素の中にform要素を入れているのが、あまり行儀のいいものではない気もしますが。）

投稿2018/08/08 03:35

退会済みユーザー

総合スコア0

urdapple

2018/08/08 03:53 編集

html5のform要素をご検索ください。（↓コメントURL）その行儀の悪い書き方をなくすために作られた要素です。モダンブラウザなら問題なく送ることができるんです。（IEを除く）内容にも書いてありますが、InternetExplorerのみHTML5の部分未対応から、Form外の<input form>要素の取得が不可能であるため、上記JavaScriptでform内にデータを移動させてから送信しています。

urdapple

2018/08/08 03:46

http://html5.cyberlab.info/elements/forms/input-form.html

退会済みユーザー

2018/08/08 04:06

urdappleさん「html5のform要素をご検索ください。」form要素じゃなくて、form属性ですね。

miyabi-sun

2018/08/08 04:32

https://developer.mozilla.org/ja/docs/Web/HTML/Element/input 対応バージョンがよくわからなかったのでMDNに行きましたが、全てのIEがform属性未対応なんですね。長期的な視点で考えると、Vue.jsで実装してしまって、form要素の外で作られたinputはform要素内でinput type=hiddenで同期するような書き方すればすぐ解決するのでjQuery捨てよう案件に思えますね。

行動規範の内容に同意します

あなたの回答