Javascriptを使用した動的なフォームについて


今javascriptを使用し、下記のようなフォームの作成を考えています
(参考にしたスクリプト→http://d.hatena.ne.jp/Mug/20060414/1145023696)

--------------- Sample Form ---------------
1,[Selectbox A]
2,[Selectbox B](Selectbox Aの選択内容に応じて選択肢が変わる)
2,[Selectbox C](Selectbox Aの選択内容に応じて選択肢が変わる)
--------------- Sample Form ---------------

上記のようなフォームで

<select name="hoge">
<option value="12000">商品1</option>
<option value="14000">商品2</option>
</select>

とした場合に、value値と商品名にあたる部分両方をPOSTしたいのですが
このようなときはどのように処理(PHP,もしくはjavascriptで)をすればよいでしょうか

一番参考になった回答をいただけた方に200P差し上げます
よろしくお願いします

回答の条件
  • 1人2回まで
  • 登録:2008/07/28 12:14:58
  • 終了:2008/08/04 12:15:02

回答(3件)

id:tukihatu No.1

牛乳先生(tukihatu)回答回数180ベストアンサー獲得回数322008/07/28 13:50:34

ポイント27pt
  • Sample Form ---------------

1,[Selectbox A]

2,[Selectbox B](Selectbox Aの選択内容に応じて選択肢が変わる)

2,[Selectbox C](Selectbox Aの選択内容に応じて選択肢が変わる)

  • Sample Form ---------------

この部分は出来ている、という認識でいいですか?


>value値と商品名にあたる部分両方をPOSTしたい

やり方はいくつかあります。

簡単な順番から。

1. POSTで飛んできたvalueを判定して、商品名を入れてしまう。

この場合$_POST[hoge]を判定して、12000なら商品1だな!という判定式を入れます。

confirm.php

if($_POST["hoge"] == "12000"){$date = "商品1";}
elseif($_POST["hoge"] == "14000"){$date = "商品2";}

もしくは

if($_POST["hoge"] == "1"){$date = "商品1";$date2 = "12000";}
elseif($_POST["hoge"] == "2"){$date = "商品2";$date2 = "14000";}

・メリット

selectのvalueを0とか1にしておくと、selectedIndexなどの命令が使いやすい

簡単

・デメリット

改変が大変すぎ


2.valueに全部情報をいれて、あとで分割する

<option value="12000xxx商品1">商品1</option>

このような形にして、confirm.phpで分割させる

confirm.php

$_POST["hoge"] = ereg_replace("x{4}","xxx",$_POST["hoge"]);
$date = split("xxx",$_POST["hoge"];
//$date[0]に12000、$date[1]に商品1が入る

if($date[1] == ""){$errer = 1;}

・メリット

改変がしやすい

情報をいくつも飛ばせる(例えば12000xxx商品xxx商品です)

・デメリット

split文字を攻撃で普通に使われたら致命的にバグる(HTMLソースを見れば、split文字がばれてしまう)


3.セレクト項目を変更したら、hiddenのinputに、商品の名前をいれてPOST

・メリット

……

・デメリット

大変なわりにメリットがない


思いつくのはこのぐらい。

セキュリティ的には、改変が大変だけど1の方法が一番です。

ただ、2のほうがスマートだし改変も楽ですね。

2にセキュリティを加えれば問題はありません

いまはif($date[1] == ""){$errer = 1;}しか書いてないですけど、そのシステムの仕様などにあわせて、エラーチェックをするように書けばOKかと

id:kn1967 No.2

kn1967回答回数2915ベストアンサー獲得回数3012008/07/28 13:56:34

ポイント27pt

JAVAScriptのほうでは特にプログラム変更はせず、データを下記のように変更しておく。

<option value="12000:商品1">商品1</option>
<option value="14000:商品2">商品2</option>

受け側がphpであるならば$_POST[hoge]や$_GET[hoge]をコロン()でsplit

PHP: split - Manual

ここでは金額+商品名という形にしたのでコロン()で挟んでみましたが

区別できるようなものならば何で挟んでも結構です。

id:Mars No.3

Mars回答回数203ベストアンサー獲得回数202008/07/28 17:11:37

ポイント26pt

Javascriptで送信する方法のサンプル。

(連動云々とはあまり関係なく使えるはずです。)

<script type="text/javascript">
function sample(F){
	F.elements['hoge2'].value=
	F.elements['hoge'].options[F.elements['hoge'].selectedIndex].text;
}

</script>

<form action="~" onsubmit="sample(this)">
<input type="hidden" name="hoge2">←商品名格納・送信用
<select name="hoge">・・・以下略

コメントはまだありません

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません