input selectで得た数値をformボタンのvalueの一部に入れたい

Question

###前提・実現したいこと
wordpressにて、makeshopを利用した買い物フォームを作っています。

注文を受ける際、
input selectで数値を選んでもらい、
その数値をformのinput type="hidden"のvaluの中の一部に入れたいと考えています。

例：
selectで選んだ数値が[5]の場合、
<input type="hidden" name="brand_info" value="2,<?php echo post_custom('商品コード'); ?>,5(←ここに入れたいのです)">

###該当のソースコード

<form action="add.html" method="post">
<SELECT onchange="document.getElementById('hosted_button_id').value=this.value">
<OPTION SELECTED>数値</OPTION>
<OPTION VALUE="1">1</OPTION>
<OPTION VALUE="2">2</OPTION>
<OPTION VALUE="3">3</OPTION>
</SELECT>
</td></tr>
</table>
</div>
<input type="hidden" name="brand_info" value="2,<?php echo post_custom('商品コード'); ?>,<input name="hosted_button_id" id="hosted_button_id" value="" type="hidden">">
<input type="image" src="<?php echo get_template_directory_uri(); ?>/img/detail_basket4.gif" alt="add to cart">
</form>

###試したこと
formの中にプルダウンのselectフォームを作り、
その中にinput hiddenで読み込むことで行けるのではないかと考えたのですが、
カートボタン画像の前に、「">」が出てきてしまい、まったく思うような動きにはなりません。

###補足情報(言語/FW/ツール等のバージョンなど)
value内の<?php echo post_custom('商品コード'); ?>は、wordpressのカスタムフィールドを利用し、そこに入力したものを読み込んでいます。

アドバイス等いただけますと大変助かります。
他に必要なソースコード等ございましたらご教示いただけますと幸いです。
お手数をおかけいたしますが、どうぞよろしくお願いいたします。

Answer 1

javascriptで制御することができます。

<form action="add.html" method="post" name="myForm">

といったように、formにname属性を付けてあげると

<SELECT onchange="document.myForm.brand_info.value = '2,' + this.value + ',5'">

というコードで値を変更できます。

Comments

[sanasasasa]

お教え下さりありがとうございます。

不勉強の為、私の理解が追い付かず、
<SELECT onchange="document.myForm.brand_info.value = '2,' + this.value + ',5'">
のコードをどのように扱えばよいのか、見当がつきません。
お教えくださったコードは、こういう風に吐き出されるよということでよろしいでしょうか？

[namimon]

<SELECT onchange="document.myForm.brand_info.value = '2,' + this.value + ',5'">
とhtml内に記述すると、

selectが変更されるたびに、
myForm（form）の
brand_info（hidden input）の値が

'2,' + （selectの値） + ',5'
になります。

hiddenなので見た目は変わらないですが、F12などを押してデベロッパーツールを起動すると、
brand_infoの値が変わっているのが確認できます。

[sanasasasa]

要領を得られない私の為に、何度もお教え下さりありがとうございます。

５の数字は例えで、ここにセレクトした数値を入れたいと考えております。
数字＋(wordpressカスタムフィールドの内容)＋（selectの値）の形です。

<form action="add.html" method="post" name="myForm">
<SELECT onchange="document.myForm.brand_info.value = '2,' + <?php echo post_custom('商品コード'); ?> + ',this.value'">
<OPTION SELECTED>数値</OPTION>
<OPTION VALUE="1">1</OPTION>
<OPTION VALUE="2">2</OPTION>
<OPTION VALUE="3">3</OPTION>
</SELECT>
<input type="hidden" name="brand_info" value="">
<input type="image" src="<?php echo get_template_directory_uri(); ?>/img/detail_basket4.gif" alt="add to cart">
</form>
</td></tr>
</table>
</div>

上記コードに書き換えたのですが、カートに渡したい<input type="hidden" name="brand_info" value="">の中のvalueが空っぽになりました。

今回突然javascriptに触れなくてはいけなくなり、まったくの不勉強で本当に申し訳ございません。
色々と助けて下さりありがとうございます。

[namimon]

<SELECT onchange="document.myForm.brand_info.value = '2,' + '<?php echo post_custom('商品コード'); ?>,' + this.value;">
ではどうでしょうか。
<?php echo post_custom('商品コード'); ?>の部分は、うまく表示されているのですよね。

[sanasasasa]

早々にお教え下さりありがとうございます。
無事に希望の形を表示することができました。
wordpressを勉強するならPHPも勿論、Javascriptの基本もきちんと理解する必要があると
今回実感いたしました。
ご丁寧に指導下さり本当にありがとうございました。