Javascript根据选中的选项计算值 [英] Javascript calculate values based on checked options
本文介绍了Javascript根据选中的选项计算值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我受命编辑一个现有的Joomla代码.这是一个javascript文件，它将根据选中的选项来计算值.
I was tasked to edit an existing Joomla code.This a javascript file that will calculate value depending on which options is checked.
file.html
file.html
<h2 class="contentheading" style="margin-top: 0px;">2016 "Train-The-Trainer" Workshops<br /><br /> AERIAL</h2>
<div>
<p>$50.00 per class/person<br />Sign up for both for $90.00</p>
</div>
<div>
<form id="paypal_submit_form" action="https://www.paypal.com/***" method="post">
<input name="cmd" type="hidden" value="_cart" />
<input name="upload" type="hidden" value="1" />
<input name="charset" type="hidden" value="utf8" />
<input name="business" type="hidden" />
<input name="currency_code" type="hidden" value="USD" />
<input name="custom" type="hidden" />
<input name="amount" type="hidden" />
<input name="first_name" type="hidden" />
<input name="last_name" type="hidden" />
<input name="address1" type="hidden" />
<input name="city" type="hidden" />
<input name="state" type="hidden" />
<input name="zip" type="hidden" />
<input name="email" type="hidden" />
<input name="night_phone_b" type="hidden" />
<input name="address_override" type="hidden" value="1" />
<div id="paypal_prs" style="font-size: 12px;">
<p>
<input id="cat-both" checked="checked" name="cat" type="radio" value="90" />
<label for="cat-both">Both</label>
<input id="cat-aerial" name="cat" type="radio" value="50" />
<label for="cat-aerial">Aerial</label>
<input id="cat-loto" name="cat" type="radio" value="50" />
<label for="cat-loto">Lockout/Tagout</label>
</p>
<br /> Members:
<select id="bal_number_of_members" style="font-size: 12px; padding: 3px;" name="number_of_members">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
</select>
<br /> Total Amount (Cost + Processing Fee):
<input style="width: 50px; margin-right: 10px; padding: 2px; padding-bottom: 1px; font-size: 12px;" name="tmp_total_amount" readonly="readonly" type="text" value="93" />
<input id="bal_submit_btn" style="padding: 3px 5px; font-size: 12px; cursor: pointer;" type="button" value="Pay Here" />
<input name="item_name_1" type="hidden" value="2016 Train-The-Trainer Workshops(AERIAL LIFTS & LOCKOUT/TAGOUT)" />
<input name="amount_1" type="hidden" value="90" />
<input name="quantity_1" type="hidden" value="1" />
<input name="item_name_2" type="hidden" value="Processing fee" />
<input name="amount_2" type="hidden" value="0" />
<input name="quantity_2" type="hidden" value="1" />
</div>
<input name="notify_url" type="hidden" value="http://some.org/tmp_ipn.php" />
<input name="return" type="hidden" value="http://some.org/" />
<input name="cancel_return" type="hidden" value="http://some.org/index.php?view=article&id=278" />
<input name="no_shipping" type="hidden" value="1" />
</form>
</div>
<div style="font-size: 11px; margin-top: 10px; color: red;">
Additional 2.9% + $0.30 processing fee will be charged with all orders paid by credit card.
</div>
<div style="margin-top: 50px;">
<a style="font-size: 18px;" href="images/Flyer_2016.pdf" target="_blank">Download Order Form</a>
</div>
<p style="font-size: 14px;">
<strong>Please fax or email the order form to the office.</strong>
</p>
html.js
function getPayPalProcessingFee() {
var qty = jQuery('#paypal_submit_form select[name=number_of_members]').val();
qty = parseInt(qty);
var cat_buttons = jQuery("input[name=cat]")
var current_index = cat_buttons.index(cat_buttons.find(':checked'));
switch (current_index){
case 0:
return 3*qty;
case 1:
case 2:
return 1.8*qty;
}
}
function trainthetrainerForm_calculateItemAmount() {
var qty = jQuery('#paypal_submit_form select[name=number_of_members]').val();
var current_val = jQuery("input[name=cat]:checked").val();
var amount = parseInt(qty) * current_val;
amount = parseFloat(amount).toFixed(2);
return amount;
}
function trainthetrainerForm_calculateFee() {
var fee = getPayPalProcessingFee();
return fee;
}
function trainthetrainerForm_displayTotalAmount() {
var amount = trainthetrainerForm_calculateItemAmount();
var fee = getPayPalProcessingFee();
var totalamount = parseFloat(amount) + parseFloat(fee);
totalamount = parseFloat(totalamount).toFixed(2);
jQuery('#paypal_submit_form input[name=tmp_total_amount]').val(totalamount);
}
function submitTrainthetrainerForm() {
var qty = jQuery('#paypal_submit_form select[name=number_of_members]').val();
jQuery('#paypal_submit_form input[name=quantity_1]').val(qty);
var totalAmount = 0;
var amount = trainthetrainerForm_calculateItemAmount();
var processingFee = trainthetrainerForm_calculateFee();
totalAmount = amount + processingFee;
jQuery('#paypal_submit_form input[name=business]').val('shana@same.org');
jQuery('#paypal_submit_form input[name=amount]').val(totalAmount);
jQuery('#paypal_submit_form input[name=amount_2]').val(processingFee);
jQuery('#paypal_submit_form').submit();
return true;
}
jQuery(document).ready(function (){
jQuery("#bal_number_of_members").change(function(){
trainthetrainerForm_displayTotalAmount();
});
jQuery("#bal_submit_btn").click(function() {
submitTrainthetrainerForm();
});
trainthetrainerForm_displayTotalAmount();
});
如果用户检查输入id = both，则该值将乘以select id = bal_number_of_members中的选项值乘以90.
If the user check input id=both, the value will be 90 multiplied by option value from select id =bal_number_of_members.
否则，如果用户单击输入id = cat-aeral和输入id = cat-loto，则值wold将乘以select id = bal_number_of_members中的选项值.
Else if the user click either input id = cat-aeral and input id = cat-loto, the value wold be 50 multiplied by option value from select id = bal_number_of_members.
输入名称temp_total_amount时出现错误NAN.
I got an error NAN in input name temp_total_amount.
有帮助吗?
推荐答案
- 您的switch语句必须具有"break"；在每个案例"之后.
-
无论选择什么，它总是返回-1(未找到):
- Your switch statement needs to have "break;" after each "case".
This was always returning -1 (not found) no matter what was selected:
var current_index = cat_buttons.index(cat_buttons.find(':checked'))
var current_index = cat_buttons.index(cat_buttons.find(':checked'))
这是一个工作代码:
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<h2 class="contentheading" style="margin-top: 0px;">2016 "Train-The-Trainer" Workshops<br /><br /> AERIAL</h2>
<div>
<p>$50.00 per class/person<br />Sign up for both for $90.00</p>
</div>
<div>
<form id="paypal_submit_form" action="https://www.paypal.com/***" method="post">
<input name="cmd" type="hidden" value="_cart" />
<input name="upload" type="hidden" value="1" />
<input name="charset" type="hidden" value="utf8" />
<input name="business" type="hidden" />
<input name="currency_code" type="hidden" value="USD" />
<input name="custom" type="hidden" />
<input name="amount" type="hidden" />
<input name="first_name" type="hidden" />
<input name="last_name" type="hidden" />
<input name="address1" type="hidden" />
<input name="city" type="hidden" />
<input name="state" type="hidden" />
<input name="zip" type="hidden" />
<input name="email" type="hidden" />
<input name="night_phone_b" type="hidden" />
<input name="address_override" type="hidden" value="1" />
<div id="paypal_prs" style="font-size: 12px;">
<p>
<input id="cat-both" checked="checked" name="cat" type="radio" value="90" />
<label for="cat-both">Both</label>
<input id="cat-aerial" name="cat" type="radio" value="50" />
<label for="cat-aerial">Aerial</label>
<input id="cat-loto" name="cat" type="radio" value="50" />
<label for="cat-loto">Lockout/Tagout</label>
</p>
<br /> Members:
<select id="bal_number_of_members" style="font-size: 12px; padding: 3px;" name="number_of_members">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
</select>
<br /> Total Amount (Cost + Processing Fee):
<input style="width: 50px; margin-right: 10px; padding: 2px; padding-bottom: 1px; font-size: 12px;" name="tmp_total_amount" readonly="readonly" type="text" value="93" />
<input id="bal_submit_btn" style="padding: 3px 5px; font-size: 12px; cursor: pointer;" type="button" value="Pay Here" />
<input name="item_name_1" type="hidden" value="2016 Train-The-Trainer Workshops(AERIAL LIFTS & LOCKOUT/TAGOUT)" />
<input name="amount_1" type="hidden" value="90" />
<input name="quantity_1" type="hidden" value="1" />
<input name="item_name_2" type="hidden" value="Processing fee" />
<input name="amount_2" type="hidden" value="0" />
<input name="quantity_2" type="hidden" value="1" />
</div>
<input name="notify_url" type="hidden" value="http://some.org/tmp_ipn.php" />
<input name="return" type="hidden" value="http://some.org/" />
<input name="cancel_return" type="hidden" value="http://some.org/index.php?view=article&id=278" />
<input name="no_shipping" type="hidden" value="1" />
</form>
</div>
<div style="font-size: 11px; margin-top: 10px; color: red;">
Additional 2.9% + $0.30 processing fee will be charged with all orders paid by credit card.
</div>
<div style="margin-top: 50px;">
<a style="font-size: 18px;" href="images/Flyer_2016.pdf" target="_blank">Download Order Form</a>
</div>
<p style="font-size: 14px;">
<strong>Please fax or email the order form to the office.</strong>
</p>
<script>
function getPayPalProcessingFee() {
var qty = jQuery('#paypal_submit_form select[name=number_of_members]').val();
qty = parseInt(qty);
//var cat_buttons = jQuery("input[name=cat]")
//var current_index = cat_buttons.index(cat_buttons.find(':checked'));
var current_index = $("input[name=cat]:checked").attr('id');
switch (current_index){
case 'cat-both':
return 3*qty;
break;
case 'cat-aerial':
return 0;
break;
case 'cat-loto':
return 1.8*qty;
break;
default:
return 0;
}
}
function trainthetrainerForm_calculateItemAmount() {
var qty = jQuery('#paypal_submit_form select[name=number_of_members]').val();
var current_val = jQuery("input[name=cat]:checked").val();
var amount = parseInt(qty) * current_val;
amount = parseFloat(amount).toFixed(2);
return amount;
}
function trainthetrainerForm_calculateFee() {
var fee = getPayPalProcessingFee();
return fee;
}
function trainthetrainerForm_displayTotalAmount() {
var amount = trainthetrainerForm_calculateItemAmount();
console.log(amount);
var fee = getPayPalProcessingFee();
console.log(fee);
var totalamount = parseFloat(amount) + parseFloat(fee);
console.log(totalamount);
totalamount = parseFloat(totalamount).toFixed(2);
console.log(totalamount);
jQuery('#paypal_submit_form input[name=tmp_total_amount]').val(totalamount);
}
function submitTrainthetrainerForm() {
var qty = jQuery('#paypal_submit_form select[name=number_of_members]').val();
jQuery('#paypal_submit_form input[name=quantity_1]').val(qty);
var totalAmount = 0;
var amount = trainthetrainerForm_calculateItemAmount();
var processingFee = trainthetrainerForm_calculateFee();
totalAmount = amount + processingFee;
jQuery('#paypal_submit_form input[name=business]').val('shana@same.org');
jQuery('#paypal_submit_form input[name=amount]').val(totalAmount);
jQuery('#paypal_submit_form input[name=amount_2]').val(processingFee);
jQuery('#paypal_submit_form').submit();
return true;
}
jQuery(document).ready(function (){
$(document).on('change',$("#bal_number_of_members"),function(){
trainthetrainerForm_displayTotalAmount();
});
jQuery("#bal_submit_btn").click(function() {
submitTrainthetrainerForm();
});
trainthetrainerForm_displayTotalAmount();
});
</script>
这篇关于Javascript根据选中的选项计算值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
