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

Question

現在申し込むフォームを作成していて、
イベントの開催日が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に入れるということがしたいです。

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

Answer 1

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>

Comments

[think49]

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

[ShunYoshizawa]

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

[yambejp]

sampleつけときました

[ShunYoshizawa]

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

Answer 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];

Comments

[ShunYoshizawa]

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

[takaboo]

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

[mirainonakamura]

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