質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.52%

  • JavaScript

    16362questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • WordPress

    7182questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 641

sanasasasa

score 6

前提・実現したいこと

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のカスタムフィールドを利用し、そこに入力したものを読み込んでいます。

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

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

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


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

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


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/01/13 14:41

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

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

    キャンセル

  • 2017/01/13 15:05

    <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の値が変わっているのが確認できます。

    キャンセル

  • 2017/01/13 15:42

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

    5の数字は例えで、ここにセレクトした数値を入れたいと考えております。
    数字+(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に触れなくてはいけなくなり、まったくの不勉強で本当に申し訳ございません。
    色々と助けて下さりありがとうございます。






    キャンセル

  • 2017/01/13 15:53

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

    キャンセル

  • 2017/01/13 15:59

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16362questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • WordPress

    7182questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。