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

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

ただいまの
回答率

89.64%

inputタグのvalue属性に2つの値を持たせて、チェックされたらその2つの値をそれぞれ別の箇所に渡したいのですができません。

解決済

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 14K+

ShunYoshizawa

score 57

現在申し込むフォームを作成していて、
イベントの開催日が2日程ありまして、
日付(inputタグのradioボタン)をチェックするとそのチェックされたvalueの値(2つとも)を
違うinputのvalue属性にそれぞれ引き渡すということがしたいのですが、よく分かりません。
また、value属性を2つ入れるやり方も分かりません。
1つだけならvalue属性のデータを引き渡せるのですが、2つになったので全然分かりません。

こちらがデータを引き渡す側のHTMLです。(ラジオボタンで選択)

<div>
  <p class="radiobtn"><input type="radio" id="radio1" name="q1" onchange="onRadioButtonChange();" value="値1, 値2"> <label for="radio1">2017年5月29日(月)</label></p>
  <p class="radiobtn"><input type="radio" id="radio2" name="q1" onchange="onRadioButtonChange();" value="値1, 値2"> <label for="radio2">2017年5月30日(火)</label></p>
</div>

こちらがデータを引き渡される側のHTMLです。

<div>
  <input type="hidden" name="product" value="">
  <input type="hidden" name="price" value="">
</div>


productとpriceそれぞれに引き渡すためのjQueryコードです。

function onRadioButtonChange() {
    var product_value = $("input[name='q1']:checked").val([0]);
    document.form1.product.value = product_value;

        var price_value = $("input[name='q1']:checked").val([1]);
    document.form1.price.value = price_value;
}

やりたいこととしては、、
最初のコード部分でvalue属性に値を複数入れておいて、
チェックされたらそのvalue属性を変数に入れて、
それぞれの値をproductとpriceに入れるということがしたいです。

どなたかお分かりの方いましたら宜しくお願い致します。。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

checkベストアンサー

+4

UIとしてはあまり良い処理だとは思えません。
受け取ったサーバー側で処理するのが妥当です。
もしどうしてもサーバー側で処理がわけられないとしても
ラジオボタンから値をhiddenに渡す意味があまりないと思います。

hiddenに予めvalueを設定しておきdisabled属性をつけてラジオボタンに
対応させておき、ラジオボタンの付替えでdisableを調整すればいいのでは?

 sample

javascriptで同じp内にあるproductとpriceのdisabledを変更するサンプルです。
HTMLの構造だけ気をつけて下さい
とりあえずtype="text"にしてありますが、隠すためにhiddenにしてもいいでしょう
※IE対策のためNodeListを配列に入れ替える処理がはいっています

<script>
document.addEventListener("change",function(e){
  var t=e.target;
  if(t.name=="q1"){
    n2a(document.querySelectorAll("[name=q1]")).forEach(function(i){
      var flg=t!=i;
      n2a(i.parentNode.querySelectorAll("[name=product],[name=price]")).forEach(function(j){
        j.disabled=flg;
      });
    });
  }
});
function n2a(node){
  if(!NodeList.prototype.forEach){
    node = Array.prototype.slice.call(node,0); 
  }
  return node;
}
</script>
<form method="get">
<p class="radiobtn"><input type="radio" id="radio1" name="q1"> <label for="radio1">2017年5月29日(月)</label>
<input type="text" name="product" value="値11" disabled>
<input type="text" name="price" value="値12" disabled>
</p>
<p class="radiobtn"><input type="radio" id="radio2" name="q1"> <label for="radio2">2017年5月30日(火)</label>
<input type="text" name="product" value="値21" disabled>
<input type="text" name="price" value="値22" disabled>
</p>
<p class="radiobtn"><input type="radio" id="radio2" name="q1"> <label for="radio3">2017年5月31日(水)</label>
<input type="text" name="product" value="値31" disabled>
<input type="text" name="price" value="値32" disabled>
</p>
</div>
<input type="submit" value="go">
</form>

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/05/29 15:20

    同意します。
    サーバ側にはCSVパーサ、JSONパーサがあるでしょうから、フォーマットさえ決めれば、適切に扱うことは容易だと思います。

    キャンセル

  • 2017/05/29 16:26

    そうでしたか、、
    処理的に良くなくてもこのやり方でできるのであれば、このやり方での解決方法が知りたいです。
    わがままを言ってしまい申し訳ありません。。
    もしお分かりでしたら教えていただきたいです。

    キャンセル

  • 2017/05/29 17:53

    sampleつけときました

    キャンセル

  • 2017/06/05 10:20

    ご返信遅れてしまい申し訳ありません。。
    こちらのコードでもできませんでした。。
    なにが間違っているかお分かりでしょうか?

    キャンセル

+2

カンマ区切りでsplitしてあげると配列に入ります!

var values = document.getElementsByName("q1").value.split(',');
console.log(values[0]);
console.log(values[1]);
var product_value = values[0];
var price_value = values[1];

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/05/29 16:24

    えっと、、これですとチェックされたかどうかが分からなくないでしょうか、、?
    チェックされた方のボタンのvalue2つを取得したいのですが、どうしたらよろしいでしょうか?

    キャンセル

  • 2017/05/29 17:41

    radioのonChangeイベントで呼び出す関数の内容を上記にしては、と言う提案だと思いますよ
    さらにhiddenにしまう記述が要りますが、それはご自身の書いたコードにありますね

    キャンセル

  • 2017/05/31 15:00

    takabooさんフォローありがとうございます。その意図でございました。

    キャンセル

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

  • ただいまの回答率 89.64%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
  • トップ
  • HTMLに関する質問
  • inputタグのvalue属性に2つの値を持たせて、チェックされたらその2つの値をそれぞれ別の箇所に渡したいのですができません。