Javascript根据选中的选项计算值

时间:2016-02-16 02:21:48

标签: javascript jquery

我的任务是编辑现有的Joomla代码。这个javascript文件将根据检查的选项计算值。

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 &amp; 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&amp;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的选项值。

否则,如果用户单击输入id = cat-aeral并输入id = cat-loto,则值wold将乘以select id = bal_number_of_members的选项值。

我在输入名称temp_total_amount中收到错误NAN。

有任何帮助吗?

1 个答案:

答案 0 :(得分:0)

  1. 你的switch语句需要&#34; break;&#34;在每个&#34;案例&#34;。
  2. 之后
  3. 无论选择什么,这总是返回-1(未找到):

    var current_index = cat_buttons.index(cat_buttons.find(&#39;:checked&#39;))

  4. 这是一个工作代码:

    <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 &amp; 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&amp;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>