入力したら自動計算してくるタブの作成

<div class="sample_wrap">
	<h1 class="sample_h1">デニールから繊維径への変換</h1>
	<p class="sample_p">デニールを入力すると繊維径を算出できます。</p>
	<form class="sample_form" method="post" action="">
		<table class="sample_table">
			<tbody><tr>
				<th class="sample_th">デニール[-]</th>
				<td class="sample_td"><input value="" name="textbox01" type="text" id="jsNum" class="sample_input"></td>
			</tr>
      <tr>
				<th class="sample_th">密度[kg/m3]</th>
				<td class="sample_td">
          <select name="density" onChange>
            <option value="1.38" selected>PET (密度: 1.38kg/m3)</option>
            <option value="0.98">PP (密度: 0.98kg/m3)</option>
          </select>
        </td>
			</tr>
			<tr>
				<th class="sample_th">繊維径[µm]</th>
				<td class="sample_td"><input value="" name="textbox03" type="text" id="jsPrice" class="sample_input" readonly=""></td>
			</tr>
		</tbody></table>
	</form>
</div>

<script>
$(function(){
	var value = 11.9; // 定数
	var maxNum = 10000; // 注文できる個数の上限
	var tagInput = $('#jsNum'); // 入力対象のinputタグID名
 
	var tagOutput = $('#jsPrice'); // 出力対象のinputタグID名
	tagInput.on('change', function() {
		var str = $(this).val();
		var num = Number(str.replace(/[^0-9]/g, '')); // 整数以外の文字列を削除
		if(num == 0) {
			num = '';
		} 
    else if (num > maxNum) { // 上限を超える個数を入力した場合
			num = maxNum;
		}
		$(this).val(num);
		if(num != 0) {
			var price = value * Math.sqrt(num / 2);
			tagOutput.val(price);
		}
	});
});
</script>

JavaScript/フォーム/自動計算フォームBタイプ(消費税なし) - TAG index
【jQuery】選択した商品の合計額を表示させる自動計算フォームを作る | できることからコツコツと
商品購入や見積もりフォームで、ページ上に現在の合計額を表示させたいというリクエストにヒイヒイ言いながら対応したあの日のメモ。 ○○円以上で送料無料とか、割引価格に切り替え用のチェックボタンも対応可能。

コメント

タイトルとURLをコピーしました