新着情報

Home > 開発者ブログ > intra-mart > 【intra-mart】formタグの中で別のformを働かせる方法

【intra-mart】formタグの中で別のformを働かせる方法

 

 
みなさんこんにちは。自称エリート(見習い)です。
そろそろ名前を変えようと考えている今日このごろです。
formタグ
 
 
 
 
先日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時やクライアント側に処理を仕込んであげればいいということです。
 
結構調べてみても参考になるものがなく難しかったのでぜひ参考にしてみてください。

2017年06月28日(水)

テレマーケティングシステムsakuraトライアル

コールセンターシステム sakuraCTI

資料請求

お問合わせ

コラム

用語集

開発者ブログ

イントラマート

Sakuraテレマーケティングシステム

 

 

営業リスト

インフラソリューションのご案内

導入事例

テレアポノウハウ本プレゼントキャンペーン

認証マーク

アースリンクは
プライバシーマークを
取得しています。

プライバシーポリシー


SSLとは?

当サイトでは、実在性の証明とプライバシー 保護のためSSLサーバ証明書を使用しSSL 暗号化通信を実現しています。

このページの先頭へ