みなさんこんにちは。自称エリート(見習い)です。

そろそろ名前を変えようと考えている今日このごろです。

 

 

 

 

先日ECサイトの制作課題を行っている際に、

「formタグの中にformの送信時とは別の値をサーバサイドに送るボタンを作りたい。。。」

という場面がありました。

 

しかしformタグの中に他のformタグをネスト(入れ子)させることはできませんので、

プログラミング初心者の私は「それじゃあ一体どう書けば良いんだ」となり、

初心者なりに考えてみたのですが思いつかずにやはり以下のようなコードになってしまいました。。

 

【HTML】

<form name="searchForm" action="">
　<imart type="imuiTextbox" name="searchText"/>
　<form name="deleteForm" action="">
　　<imart type="hidden" mode="deleteText" />
　　<imart type="imuiButton" value="文字列削除ボタン" onClick="this.form.submit();" />
　</form>
　<imart type="submit" value="検索ボタン" />
</form>

 

上記の書き方では「searchFormタグ」の中に「deleteFormタグ」が入っています。

しかし先ほど書いたようにformタグはネストすることができませんので、

“文字列削除ボタン”が「name=”searchText”」と「mode=”deleteText”」の両方の値をサーバサイドに送ってしまいます。

 

 

 

さてどうしたものかと思い先輩方に相談した結果、同じform内で「searchFormタグ」と「deleteFormタグ」の値を別々に送りたい場合は、

クライアントサイドのJavascriptを利用して「deleteFormタグ」を「searchFormタグ」の外に作成すれば良いということがわかりました。

 

【HTML】

<script type = "text/javascript">
	function deleteTextSubmit(){
		document.deleteForm.mode.value = "deleteText";
		document.deleteForm.submit();
	}
</script>
<form name="searchForm" action="">
	<imart type="imuiTextbox" name="cartText"/>
	<imart type="imuiButton" value="文字列削除ボタン" onClick="deleteTextSubmit();" />
	<imart type="submit" value="検索ボタン" />
</form>
<form name="deleteForm" action="">
	<imart type="hidden" mode= />
</form>

 

このようにonClickでクライアント側のJavascriptに処理を飛ばしてmodeに”deleteText”を代入するように書くと、

別のformに書いた「mode=”deleteText”」だけをサーバ側に送信することができます。

hiddenの値が常に同じでなければonClick時やクライアント側に処理を仕込んであげればいいということです。

 

結構調べてみても参考になるものがなく難しかったのでぜひ参考にしてみてください。