親子関係の入力項目をフォームで送信、受け取る方法

Question

お世話になっております。
現在 JAVAで登録フォームを作成しています。
作成に伴いご相談させて頂きたいのですが、
登録フォームで親子関係の入力項目があり、
増やすボタンを押したら、項目が増える等動的に増減する仕組みになっております。

登録フォームのデフォルト表示↓
<input type="text" name="oya_0">
<input type="text" name="ko_0_0">
親増やすボタン押下で追加↓
<input type="text" name="oya_1">
<input type="text" name="ko_1_0">
子増やすボタンで追加↓
<input type="text" name="ko_1_1">

最初は二次元配列で作成していたのですが、JAVAファイルでgetParameterで取得できないようなので
jqueryでnameをひとつずつ指定するよう修正しました。

ですがこの書き方ですとどのくらい増減があったか把握できないため
getParameterでもれなく取得することが難しいと感じました。

親子関係があり、動的に増減するフォームはどのように作成するとよろしいでしょうか。
分かりづらくすみませんが何卒よろしくお願いいたします。

jquery

function make_ko(ko_num){
	var len = $(".p_email").length;
	var len_plus = len+1;
	var element = $(".ko_"+ko_num).children(".ko_form");
	var element_val = $(element).length;
	var element_val_2 = element_val+1;
	var ko_len = $(".oya_ko_css").length;
	//div作ってクラス指定する
		var sample_div = $("<div/>");
		sample_div.addClass("ko_txt_" +len_plus);
		sample_div.addClass("ko_form");

		var title = $("<p/>");
		title.text("【"+len_plus+"】 内容の登録");

		var spn_0 = $("<span/>");
		spn_0.text("内容");

		//divの中の子要素を作る
		var inp_0 = $("<input/>");
		inp_0.attr({
			"type":"text",
			"num":ko_len,
			"name":"param_"+(ko_num-1)+"_"+element_val+"_des_contents"
		});
		inp_0.addClass("form-control");
		inp_0.val("");

		var spn_1 = $("<span/>");
		spn_1.text("単位");
		var inp_1 = $("<input/>");
		inp_1.attr({
			"type":"text",
			"num":ko_len,
			"name":"param_"+(ko_num-1)+"_"+element_val+"_des_unit",
			"list": "quontity"
		});
		inp_1.addClass("form-control textBox");
		inp_1.val("");

		var spn_2 = $("<span/>");
		spn_2.text("数量");
		var inp_2 = $("<input/>");
		inp_2.attr({
			"type":"text",
			"num":ko_len,
			"name":"param_"+(ko_num-1)+"_"+element_val+"_des_quontity"
		});
		inp_2.addClass("form-control");
		inp_2.val("");

		var sp_02_5 = $("<span/>");
		sp_02_5.attr({
			"id":"des_er"+(ko_num-1)+"_"+element_val+"",
			"style" : "color:red"
		});

		var spn_3 = $("<span/>");
		spn_3.text("単価");

		var spn_4 = $("<span/>");
		spn_4.text("価格");
		spn_4.attr({
			"id":"money"+(ko_num-1)+"_"+element_val+""
		});

		var sp_error = $("<span/>")
		sp_error.addClass("alert");
		var inp_3 = $("<input/>");
		inp_3.attr({
			"type":"text",
			"num":ko_len,
			"name":"param_"+(ko_num-1)+"_"+element_val+"_des_unit_price"
		});
		inp_3.addClass("p_email form-control textBox");
		inp_3.val("");

		var del_btn = $("<input/>");
		del_btn.attr({
			"type":"button",
			"num":len_plus,
		});
		del_btn.addClass("delete");
		del_btn.val("削除");

		var newline = $("<br />");
		var newline_2 = $("<br />");
		var newline_3 = $("<br />");
		var newline_4 = $("<br />");

		sample_div.append(title);
		sample_div.append(spn_0);
		sample_div.append(inp_0);
		sample_div.append(newline);
		sample_div.append(spn_1);
		sample_div.append(inp_1);
		sample_div.append(newline_2);

		sample_div.append(spn_2);
		sample_div.append(inp_2);
		sample_div.append(sp_02_5);
		sample_div.append(newline_3);
		sample_div.append(spn_3);
		sample_div.append(inp_3);
		sample_div.append(newline_4);
		sample_div.append(spn_4);

		if(len_plus >= 2){
			sample_div.append(del_btn);
		}

		$(".ko_"+ko_num).append(sample_div);

		$(".delete").on("click",function(){
			var del_num = $(this).attr("num");
			$(".ko_txt_"+del_num).remove();
		});
	});
}

function make_oya(){
	var len = $(".oya_ko_css").length;
	var len_plus = len+1;
	//先に元のdivをつくる、必要ならその中にさらにdivをつくる
	var oyako = $("<div/>");
	oyako.addClass("oyako_"+len_plus);
	oyako.addClass("oya_ko_css");
	var oya_1 = $("<div/>");
	oya_1.addClass("oya_"+len_plus);
	oya_1.addClass("oya_css");
	var oya_title = $("<div/>");
	oya_title.addClass("oya_title");

	var ko_1 = $("<div/>");
	ko_1.addClass("ko_"+len_plus);
	ko_1.addClass("ko_css");
	var ko_txt = $("<div/>");
	ko_txt.addClass("ko_txt");
	ko_txt.addClass("ko_form");

	//親要素部品作り
	var title = $("<p/>");
	title.text("【"+len_plus+"】内容項目の登録");
	var sp_0 = $("<span/>");
	sp_0.text("内容項目");
	var sp_0_1 = $("<span/>")
	sp_0_1.addClass("alert");
	var inp_0 = $("<input/>");
	inp_0.attr({
		"type":"text",
		"num":len_plus,
		"name":"param_"+len+"_quo_description_item"
	});
	inp_0.addClass("form-control");

	var sp_01 = $("<span/>");
	sp_01.text("単位");
	var inp_01 = $("<input/>");
	inp_01.attr({
		"type":"text",
		"num":len_plus,
		"name":"param_"+len+"_quo_unit",
		"list": "quontity"
	});
	inp_01.addClass("form-control");

	var sp_02 = $("<span/>");
	sp_02.text("数量");
	var inp_02 = $("<input/>");
	inp_02.attr({
		"type":"text",
		"num":len_plus,
		"name":"param_"+len+"_quo_quontity"
	});
	inp_02.addClass("form-control");

	var sp_03 = $("<span/>");
	sp_03.text("単価");
	var inp_03 = $("<input/>");
	inp_03.attr({
		"type":"text",
		"num":len_plus,
		"name":"param_"+len+"_quo_unit_price"
	});
	inp_03.addClass("form-control textBox");

	var sp_03_5 = $("<span/>");
	sp_03_5.attr({
		"id":"quo_er"+len+"",
		"style" : "color:red"
	});

	var sp_04 = $("<span/>");
	sp_04.text("価格");
	sp_04.attr({
		"id":"money"+len+""
	});

	var newline = $("<br />");
	var newline_2 = $("<br />");
	var newline_3 = $("<br />");
	var newline_4 = $("<br />");
	var newline_5 = $("<br />");
	var newline_6 = $("<br />");
	var newline_7 = $("<br />");
	var newline_8 = $("<br />");
	var newline_9 = $("<br />");

	//子要素の部品作り
	var ko_addbtn = $("<input/>");
	ko_addbtn.attr({
		"type":"button",
		"num":len_plus,
		"id":"ko_add_btn"
	});
	ko_addbtn.addClass("ko_btn_css btn btn-success");
	ko_addbtn.val("内容を増やす");

	var ko_title = $("<p/>");
	ko_title.text("【"+1+"】 内容の登録");

	var spn_4 = $("<span/>");
	spn_4.text("内容");
	var inp_4 = $("<input/>");
	inp_4.attr({
		"type":"text",
		"num":len_plus,
		"name":"param_"+len+"_0_des_contents"
	});
	inp_4.addClass("form-control");

	var spn_5 = $("<span/>");
	spn_5.text("単位");
	var inp_5 = $("<input/>");
	inp_5.attr({
		"type":"text",
		"num":len_plus,
		"name":"param_"+len+"_0_des_unit",
		"list": "quontity"
	});
	inp_5.addClass("form-control");

	var spn_6 = $("<span/>");
	spn_6.text("数量");
	var inp_6 = $("<input/>");
	inp_6.attr({
		"type":"text",
		"num":len_plus,
		"name":"param_"+len+"_0_des_quontity"
	});
	inp_6.addClass("form-control");

	var spn_6_5 = $("<span/>");
	spn_6_5.attr({
		"id" : "des_er"+len+"",
		"style" : "color:red"
		});

	var spn_7 = $("<span/>");
	spn_7.text("単価");
	var sp_error = $("<span/>")
	sp_error.addClass("alert");
	var inp_7 = $("<input/>");
	inp_7.attr({
		"type":"text",
		"num":len_plus,
		"name":"param_"+len+"_0_des_unit_price"
	});
	inp_7.addClass("p_email form-control textBox");

	var spn_8 = $("<span/>");
	spn_8.text("価格");
	spn_8.attr({
		"id":"money_ko"+len+"_0"
	});

	//親要素のdivの中に子要素となるdivをappend appendしたdivの中に入れる要素をappend 最後に作った大枠のdivをhtmlにあるdivにappend
	oyako.append(oya_1);
	oyako.append(ko_1);
	oya_1.append(oya_title);
	oya_title.append(title);
	oya_1.append(newline);
	oya_1.append(sp_0);
	oya_1.append(inp_0);
	oya_1.append(newline_2);
	oya_1.append(sp_01);
	oya_1.append(inp_01);
	oya_1.append(newline_3);
	oya_1.append(sp_02);
	oya_1.append(inp_02);
	oya_1.append(sp_03_5);
	oya_1.append(newline_4);
	oya_1.append(sp_03);
	oya_1.append(inp_03);
	oya_1.append(newline);
	oya_1.append(sp_04);
	oya_1.append(newline_8);

	ko_1.append(ko_addbtn);
	ko_1.append(ko_txt);
	ko_txt.append(ko_title);
	ko_txt.append(spn_4);
	ko_txt.append(inp_4);
	ko_txt.append(newline_5);
	ko_txt.append(spn_5);
	ko_txt.append(inp_5);
	ko_txt.append(newline_6);
	ko_txt.append(spn_6);
	ko_txt.append(inp_6);
	ko_txt.append(spn_6_5);
	ko_txt.append(newline_7);
	ko_txt.append(spn_7);
	ko_txt.append(inp_7);
	ko_txt.append(newline_9);
	ko_txt.append(spn_8);

	$("#family").append(oyako);
}


//jquery
$(function(){
	make_oya();

	$('#family').on('click','#ko_add_btn',function(){
		var ko_num = $(this).attr("num");
		make_ko(ko_num);
	});

	$("#oya_add_btn").click(function(){
		make_oya();
	});
});

JAVA

String param_0_quo_description_item = request.getParameter("param_0_quo_description_item");
String param_0_quo_unit = request.getParameter("param_0_quo_unit");
String param_0_quo_quontity = request.getParameter(" param_0_quo_quontity");
String param_0_quo_unit_price = request.getParameter("param_0_quo_unit_price");
	

Comments

[m.ts10806]

現在作成しているjQueryでフォームを増減・およびJava側の受け取り部分のソースコードをご提示願います。

[tkck]

追記しました。

[Stripe]

request.getParameterNames()では解決しない感じですか？