2016-02-21 63 views
2

我有一个表格,将计算的金额发送到paypal。有三个单选按钮为此,我选择第一个按钮时没有问题,它会正确计算和发送正确的数据paypal.The第二和第三是我的问题,当我选择第二和第三,先前的值或数据从第一个按钮将被发送到贝宝而不是第二或第三个值..这是一个工作表如果我选择另一个单选按钮(#猫 - 两个工作正常,而#cat-loto和#cat-aerial没有提交正确的值,#cat的值都是总是发送到贝宝代替) (这是一个问题用户回答阿兰Nisam,stackoverflow当提交到PayPal时,Javascript表单提交数据没有变化

的Html

<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/cgi-bin/webscr" target="_blank" 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> 

JS

<script src="jquery-1.11.3.min.js"></script> 
<script> 
function getPayPalProcessingFee() { 
     var qty = $('#paypal_submit_form select[name=number_of_members]').val(); 
     qty = parseInt(qty); 


     var current_index = $("input[name=cat]:checked").attr('id'); 

     switch (current_index){ 
      case 'cat-both': 

       return 3*qty; 

       break; 
      case 'cat-aerial': 

       return 1.8*qty; 
       break; 

      case 'cat-loto': 

       return 1.8*qty; 
       break; 
      default: 
       return 0; 
     } 
    } 

    function trainthetrainerForm_calculateFee() { 
     var fee = getPayPalProcessingFee(); 
     return fee; 
    } 
    function trainthetrainerForm_calculateItemAmount() { 
    var qty = $('#paypal_submit_form select[name=number_of_members]').val(); 
    var current_val = $("input[name=cat]:checked").val(); 
     console.log(current_val); 
    var amount = parseInt(qty) * current_val; 
    amount = parseFloat(amount).toFixed(2); 
    return amount; 
    } 


    function trainthetrainerForm_displayTotalAmount() { 
    var amount = trainthetrainerForm_calculateItemAmount(); 
    console.log(parseFloat(amount)); 

    var totalamount = parseFloat(amount)+((parseFloat(amount)*0.029888888888889)+0.30); 
    console.log(totalamount); 
    totalamount = parseFloat(totalamount).toFixed(2); 
    console.log(totalamount); 

    $('#paypal_submit_form input[name=tmp_total_amount]').val(totalamount); 

    } 

    function submitTrainthetrainerForm() { 
    var qty = $('#paypal_submit_form select[name=number_of_members]').val(); 
    $('#paypal_submit_form input[name=quantity_1]').val(qty); 

    var totalAmount = 0; 
    var amount = trainthetrainerForm_calculateItemAmount(); 
    var processingFee = trainthetrainerForm_calculateFee(); 

    totalAmount = amount + processingFee; 

    $('#paypal_submit_form input[name=business]').val('[email protected]'); 
    $('#paypal_submit_form input[name=amount]').val(totalAmount); 
    $('#paypal_submit_form input[name=amount_2]').val(processingFee); 
    $('#paypal_submit_form').submit(); 
    } 

    $(document).ready(function() { 
    $(document).on('change', $("#bal_number_of_members"), function() { 
     trainthetrainerForm_displayTotalAmount(); 
    }); 
    $("#bal_submit_btn").click(function() { 
     submitTrainthetrainerForm(); 
    }); 

    // trainthetrainerForm_displayTotalAmount(); 
    }); 
</script> 

一个工作拨弄

fiddle

更新

我发现输入呐我= “amount_1” 值= “90” 不改变的量相当于

var amount = trainthetrainerForm_calculateItemAmount(); 

里面的

submitTrainthetrainerForm() 

功能

形式的行动

action="https://www.paypal.com/cgi-bin/webscr" 

任何想法为了这?

更新

好吧,我觉得我几乎解决这个problem.The#猫乐透和#猫的空中值已经发送给贝宝,但如果让我选择2,3,4,5从选择#bal_number_of_members,前面的值将被选择#bal_number_of_members.Example倍增,如果我为cat-loto选择1,它将发送正确的数字51.79,如果我更改并为#bal_number_of_members选择2, tmp_value是103.59将乘以2,它将发送给paypal的值为103.59乘以2,它应该是103.59。

我更新根据用户的阿兰Nisam回答

JS文件JavaScript文件

<script> 
    function getPayPalProcessingFee() { 
    var qty = $('#paypal_submit_form select[name=number_of_members]').val(); 
    qty = parseInt(qty); 

    var current_index = $("input[name=cat]:checked").attr('id'); 

    switch (current_index){ 
     case 'cat-both': 

      return 3*qty; 

      break; 
     case 'cat-aerial': 

      return 1.8*qty; 
      break; 

     case 'cat-loto': 

      return 1.8*qty; 
      break; 
     default: 
      return 0; 
    } 
    } 

function trainthetrainerForm_calculateFee() { 
    var fee = getPayPalProcessingFee(); 
    return fee; 
} 
function trainthetrainerForm_calculateItemAmount() { 
    var qty = jQuery('#paypal_submit_form select[name=number_of_members]').val(); 
    var current_val = jQuery("input[name=cat]:checked").val(); 
    //console.log(current_val); 
    var amount = parseInt(qty) * current_val; 
    amount = parseFloat(amount).toFixed(2); 
    return amount; 
    } 


function trainthetrainerForm_displayTotalAmount() { 
    var amount = trainthetrainerForm_calculateItemAmount(); 
    console.log(parseFloat(amount)); 
    var totalamount = parseFloat(amount)+ ((parseFloat(amount)*0.029888888888889)+0.30); 
    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('[email protected]'); 
    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(); 
    }); 

    $(document).on('change',$('input[name="tmp_total_amount"]'),function(){ 
    $('input[name="amount_1"]').val($('input[name="tmp_total_amount"]').val()); 
    trainthetrainerForm_displayTotalAmount(); 
    }); 
    }); 
+0

我只看到一个按钮,其他两个在哪里? – terrymorse

+0

@terrymorse,我的意思是input type =“radio” –

+0

Duplicate:http://stackoverflow.com/questions/35422562/javascript-calculate-values-based-on-checked-options/35426628?noredirect=1#comment58731333_35426628 –

回答

0

更新使用正确的领域:

<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 type="text/javascript"> 
    function trainthetrainerForm_calculateItemAmount() { 
    var qty = jQuery('#paypal_submit_form select[name=number_of_members]').val(); 
    var current_val = jQuery("input[name=cat]:checked").val(); 
     //console.log(current_val); 
    var amount = parseInt(qty) * current_val; 
    amount = parseFloat(amount).toFixed(2); 
    return amount; 
    } 


    function trainthetrainerForm_displayTotalAmount() { 
    var amount = trainthetrainerForm_calculateItemAmount(); 
    console.log(parseFloat(amount)); 
    var totalamount = parseFloat(amount)+((parseFloat(amount)*0.029888888888889)+0.30); 
    console.log(totalamount); 
    totalamount = parseFloat(totalamount).toFixed(2); 
    console.log(totalamount); 

    jQuery('#paypal_submit_form input[name=tmp_total_amount]').val(totalamount); 
    $('input[name="amount_1"]').val(totalamount); 
    } 

    function trainthetrainerForm_calculateFee() { 
    var amount = trainthetrainerForm_calculateItemAmount(); 
    return (parseFloat(amount)*0.029888888888889)+0.30; 
    } 

    function submitTrainthetrainerForm(e) { 
    e.preventDefault(); 
    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('[email protected]'); 
    jQuery('#paypal_submit_form input[name=amount]').val(totalAmount); 
    jQuery('#paypal_submit_form input[name=amount_2]').val(processingFee); 

console.log($('form').serializeObject()); 
return false; 

    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(e) { 
     submitTrainthetrainerForm(e); 
    }); 

    trainthetrainerForm_displayTotalAmount(); 
    }); 

$.fn.serializeObject = function() 
{ 
    var o = {}; 
    var a = this.serializeArray(); 
    $.each(a, function() { 
     if (o[this.name] !== undefined) { 
      if (!o[this.name].push) { 
       o[this.name] = [o[this.name]]; 
      } 
      o[this.name].push(this.value || ''); 
     } else { 
      o[this.name] = this.value || ''; 
     } 
    }); 
    return o; 
}; 
</script> 
+0

仍然是#cat的值 - #cat-aerial,#cat-loto –

+0

好吧,我编辑了我的最后一个答案,这样当你提交时,它会转储所有字段。我认为比较实际发布的内容会有所帮助。 –

+0

已经这样做了。在开发者控制台中,console.log所有正确的值都是正确的。但我很困惑,为什么在发送到paypal时它不会发送正确的值 –

1

好丹妮,这是我最后的答案 - 我唯一不确定的项目是“quantity_2”。它设置为1,我不确定它代表什么意思。

<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" value="[email protected]" /> 
     <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 type="text/javascript"> 
$('#bal_submit_btn').on('click',function(e){ 
    //Remove this in production and the form will continue to submit 
    e.preventDefault(); 
    var theFee = getFee(); 
    var thePrice = getPrice(); 
    $('#paypal_submit_form input[name=business]').val('[email protected]'); 
    $('#paypal_submit_form input[name=amount]').val(thePrice); 
    $('#paypal_submit_form input[name=amount_2]').val(theFee); 

    console.log($('#paypal_submit_form').serializeObject()); 
    return false; 
}) 

$(document).on('change', $("#bal_number_of_members"), function(e) { 
    return update(); 
}); 

function update(){ 
    var qty = $('#bal_number_of_members').val(); 
    var theFee = getFee(); 
    var thePrice = getPrice(); 
    var total = parseFloat(thePrice + theFee); 
    $('#paypal_submit_form input[name=tmp_total_amount]').val(total); 
    $('#paypal_submit_form input[name="amount_1"]').val(total); 
    $('#paypal_submit_form input[name="amount"]').val(total); 
    $('#paypal_submit_form input[name="amount_2"]').val(theFee); 
    $('#paypal_submit_form input[name=quantity_1]').val(qty); 
    return Math.round(total * 100)/100; 
} 

function getPrice() { 
    var qty = $('#bal_number_of_members').val(); 
    var pricePerUnit = $("input[name=cat]:checked").val(); 
    var price = pricePerUnit * qty; 
    return Math.round(price *100)/100; 
} 

function getFee() { 
    var qty = $('#bal_number_of_members').val(); 
    var pricePerUnit = $("input[name=cat]:checked").val(); 
    var price = pricePerUnit * qty; 
    var theFee = Math.round(((price*0.029888888888889)+0.30) * 100)/100; 
    return theFee; 
} 

$(document).ready(function() { 
    return update(); 
}); 

$.fn.serializeObject = function(){ 
     var o = {}; 
     var a = this.serializeArray(); 
     $.each(a, function() { 
       if (o[this.name] !== undefined) { 
         if (!o[this.name].push) { 
           o[this.name] = [o[this.name]]; 
         } 
         o[this.name].push(this.value || ''); 
       } else { 
         o[this.name] = this.value || ''; 
       } 
     }); 
     return o; 
}; 
</script>