複数のformを1にまとめてsubmitボタン毎にhiddenをjavascriptでPOSTしたい

Question

前提・実現したいこと

お世話になっております。

元々以下の通りformを3つ使ってhiddenの情報をPOST送信していたのですが、
formが多いと煩雑になるので1つにしたいとご指摘をいただきました。

その場合、javascripでの対応になるのかと思ったのですが、
全く上手くいかず、皆様のお知恵を拝借いただけますと幸いです。

元のソースコードはこちらです。

<?php
echo <<<EOD
	<table border="2" cellpadding="2" cellspacing="0">
	<tr>
		<td align="center" nowrap>メニュー</font></td>
	</tr>
EOD;
for($i = 0 ; $i < count($listArray); $i++){
echo <<<EOD
	<tr>
		</td>
		<td align="center" class="Bold1" width="200">
			<form action="#" method="post" target="blank" style="display: inline">
			<input type="hidden" name="mode" value="check">
			<input type="hidden" name="no" value="{$listArray[$i]['no']}">
			<input type="hidden" name="kind" value="$kind">
			<input type="submit" size="12" maxlength="10" value="確認">
			</form>
			<form action="#" method="post" target="blank" style="display: inline">
			<input type="hidden" name="mode" value="fix">
			<input type="hidden" name="no" value="{$listArray[$i]['no']}">
			<input type="hidden" name="kind" value="$kind">
			<input type="submit" size="12" maxlength="10" value="修正">
			</form>
			<form action="#" method="post" target="blank" style="display: inline">
			<input type="hidden" name="mode" value="delete">
			<input type="hidden" name="no" value="{$listArray[$i]['no']}">
			<input type="hidden" name="kind" value="$kind">
			<input type="submit" size="12" maxlength="10" value="削除" onClick="return d_check()">
			</form>
		</td>
	</tr>
EOD;
}

echo <<<EOD
</table>
EOD;

?>

<script language="JavaScript">

//削除確認
function d_check(){
	if (window.confirm('削除しますか？')) {
		return true;
	}
	else{
		alert('キャンセルしました');
		return false;
	}
}
</script>

試したこと

ひとまずformを1つにして、各ボタンにonclickで関数を呼び出す
という基本的なところまでしかいけてないです。

javascripに疎く、このやり方が正しいのかもわからず、
答えを知りたいというより、どういった関数をどのように使うべきか、
参考例などをご教示いただけますと大変助かります。

javascripでalertにしているのはテストのつもりです。
これも上手く出ないので行き詰ってしまってます。。。

<?php
echo <<<EOD
	<table border="2" cellpadding="2" cellspacing="0">
	<tr>
		<td align="center" nowrap>メニュー</font></td>
	</tr>
EOD;
for($i = 0 ; $i < count($listArray); $i++){
echo <<<EOD
	<tr>
		</td>
		<td align="center" class="Bold1" width="200">
			<form id="test" action="#" method="post" target="blank" style="display: inline">
			<input type="hidden" name="mode" value="check">
			<input type="hidden" name="no" value="{$listArray[$i]['no']}">
			<input type="hidden" name="kind" value="$kind">
			<input type="submit" size="12" maxlength="10" value="確認" onClick="sample1_exec">

			<input type="hidden" name="mode" value="fix">
			<input type="hidden" name="no" value="{$listArray[$i]['no']}">
			<input type="hidden" name="kind" value="$kind">
			<input type="submit" size="12" maxlength="10" value="修正" onClick="sample2_exec">

			<input type="hidden" name="mode" value="delete">
			<input type="hidden" name="no" value="{$listArray[$i]['no']}">
			<input type="hidden" name="kind" value="$kind">
			<input type="submit" size="12" maxlength="10" value="削除" onClick="return d_check()" onClick="sample3_exec">
			</form>
		</td>
	</tr>
EOD;
}

echo <<<EOD
</table>
EOD;

?>

<script language="JavaScript">
<!--

//削除確認
function d_check(){
	if (window.confirm('削除しますか？')) {
		return true;
	}
	else{
		alert('キャンセルしました');
		return false;
	}
}

function sample1_exec(){
	var f = document.test;
	for(var i = 0 ; i < f.elements.length ; i++){
		if(f.elements[i].type=='hidden'){
			alert(i + '番目の値は' + f.elements[i].value + 'です' );
		}
	}	

}

function sample2_exec(){
	var f = document.test;
	for(var i = 0 ; i < f.elements.length ; i++){
		if(f.elements[i].type=='hidden'){
			alert(i + '番目の値は' + f.elements[i].value + 'です' );
		}
	}	

}

function sample3_exec(){
	var f = document.test;
	for(var i = 0 ; i < f.elements.length ; i++){
		if(f.elements[i].type=='hidden'){
			alert(i + '番目の値は' + f.elements[i].value + 'です' );
		}
	}	

}

//-->
</script>

Answer 1

確認、修正、削除の機能を一度の送ることは仕様として問題があるのでは？

formを一つにまとめてsubmitボタンにnameをつけて
受け側でそのnameを利用してジャッジすればよいかも

Comments

[uthio]

コメントありがとうございます。
仰る通り一度に送ることはよくないです。
あくまで機能は別々ですが、押下されたボタンに応じてそれぞれ必要な値をPOSTしたいのが意図になります。

submitボタンにname、ですね。
なるほど、ちょっと先に進めそうな気がします。
もう一度挑戦します。

Answer 2

こちらで自己解決しましたので記載いたします。

<?php
echo <<<EOD
<form id="hogehoge" action="#" method="post" target="blank" style="display: inline">
    <input type="hidden" id="no" name="no" value="">
    <input type="hidden" id="kind" name="kind" value="">
    <input type="hidden" id="mode" name="mode" value="">
    <table border="2" cellpadding="2" cellspacing="0">
    <tr>
        <td align="center" nowrap>メニュー</font></td>
    </tr>
EOD;
for($i = 0 ; $i < count($Array); $i++){
echo <<<EOD
    <tr>
        </td>
        <td align="center" class="Bold1" width="200">
            <input type="button" size="12" maxlength="10" value="確認" onclick="hoge('{$Array[$i]['no']}','{$kind}','check')">
            <input type="button" size="12" maxlength="10" value="修正" onclick="hoge('{$Array[$i]['no']}','{$kind}','fix')">
            <input type="button" size="12" maxlength="10" value="削除" onclick="d_check();hoge('{$Array[$i]['no']}','{$kind}','detele')">
        </td>
    </tr>
EOD;
}

echo <<<EOD
</table>
</form>
EOD;
?>

function hoge( no, kind, mode) {

	$('#no').val(no);
	$('#kind').val(kind);
	$('#mode').val(mode);
	$('#hogehoge').submit();
}