同じページ内に、同一の計算フォームで複数のフォーム

Question

前提

初めまして。
Javascript初心者です。
jqueryにてWEBサイト用の計算フォームを作成しております。
様々なサイトを参考にさせていただきながら何とか計算フォームを作成することができたのですが
一つの入力フォームに数字を入力すると全ての結果欄に数字が出てきてしまいます。

実現したいこと

・同じ計算式を使用。
・参照する商品のvalueはそれぞれ商品ごとに違うもの。
・実際は商品数が多く、それに伴いフォームの数も多くなるためできるだけ短いコードで実現したい。
・入力フォームに数値を入力し、それに対応した結果欄にのみ結果を出力したい。

発生している問題・エラーメッセージ

・「生地A」のvalueしか参照されない。
・全てのフォームの計算結果欄に計算結果が出力されてしまう。

該当のソースコード

<div class="mitsumori">
　　<p class="mitsumori-ttl">見積もり</p>
　　<p class="media-price" value="3500">生地A ¥3,500/m</p>
　　<div class="mitsumori-form">
　　　　　<p><span最大生地幅</span><br>1300mm</p>
　　　　　<input value="" name="textbox01" type="text" class="ef jsNum1" placeholder="長さ">
　　</div>
　 <div class="result">
　  <input value="0" name="textbox02" type="text" class="jsPrice1" readonly>
  </div>
</div>

<div class="mitsumori">
　　<p class="mitsumori-ttl">見積もり</p>
　　<p class="media-price" value="4000">生地B ¥4,000/m</p>
　　<div class="mitsumori-form">
　　　　　<p><span最大生地幅</span><br>1300mm</p>
　　　　　<input value="" name="textbox01" type="text" class="ef jsNum1" placeholder="長さ">
　　</div>
　 <div class="result">
　  <input value="0" name="textbox02" type="text" class="jsPrice1" readonly>
  </div>
</div>

	jQuery(function(){
	var tagInput = jQuery('.jsNum1'); // 入力対象のinputタグID名
	tagInput.on('change', function() {
		var tagOutput = jQuery('.jsPrice1'); // 出力対象のinputタグID名
		var value = jQuery('.media-price').val();
		var str = jQuery(this).val();
		var num = Number(str.replace(/[^0-9]/g, '')); // 整数以外の文字列を削除
		if(num == 0) {
			num = '';
		}
		jQuery(this).val(num);
		if(num != 0){
			if(num >= 701) {
			var price = ( num / 1000 ) * value;
			var result = Math.round(price);
			tagOutput.val(addFigure(result));
		} else if( 301 <= num && num <= 700 ){
			var price = (( 500 / 1000 ) * value) *1.4;
			var result = Math.round(price);
			tagOutput.val(addFigure(result));
		} else {
			var price = (( 300 / 1000 ) * value) *1.4;
			var result = Math.round(price);
			tagOutput.val(addFigure(result));
		}
		}
	});
		/*-------------------------------
	カンマ処理
	-------------------------------*/
	function addFigure(str) {
		var num = new String(str).replace(/,/g, "");
		while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2")));
		return num;
	}
});

試したこと

分かり難文章で大変申し訳ないのですが、
もしお分かりになる方がおりましたらお力添えいただけると大変ありがたいです。
どうぞ宜しくお願いいたします。

Answer 1

		var tagOutput = jQuery('.jsPrice1'); // 出力対象のinputタグID名
		var value = jQuery('.media-price').val();

この2行が問題です。
tagOutput は、文書中の jsPrice1 クラスを持つすべての要素を指します。
value は、文書中の media-price クラスを持つ最初の要素の値になります。
これらの要素を、this からの相対位置で求める必要があります。

$(this).closest('.mitsumori').find('.jsPrice1') などとして mitsumori を起点として要素を探すとわかりやすいかと思います。

Comments

[drillponta]

ご回答ありがとうございます。
回答いただいた通り
var tagOutput = jQuery('.jsPrice1'); // 出力対象のinputタグID名
var value = jQuery('.media-price').val();

これらを

var tagOutput = jQuery('.jsPrice1'); // 出力対象のinputタグID名
var value = jQuery('.media-price').val();

このように変えることで、入力した数値の下の結果欄にのみ計算結果を出すことが出来ました！本当にありがとうございます。