Question

我有一个表格会将计算出的金额发送到paypal.There有三个单选按钮，我选择第一个按钮时没有问题，它会正确计算并将正确的数据发送到paypal。第二个和第三个是我的问题，当我选择第二个和第三个时，先前的值或第一个按钮的数据将被发送到贝宝而不是第二个或第三个值。这是一个工作表格，除了它没有发送适当的金额到Paypal如果我选择另一个单选按钮（#cat-both正常工作，而＃cat-loto和#cat-aerial没有提交正确的值，＃cat-both的值总是发送到paypal）（这是用户Alain Nisam回答的问题，stackoverflow）

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('shana@same.org');
    $('#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”value =“90”不会更改为相当于

的金额

  var amount = trainthetrainerForm_calculateItemAmount();

在

内

  submitTrainthetrainerForm()

功能

表单行动

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

对此有何想法？

更新

好吧我想我几乎解决了这个问题。＃cat-loto和#cat-aerial值已经发送到paypal，但是如果我从select #bal_number_of_members中选择2,3,4,5，那么之前的值将是乘以select＃bal_number_of_members.Example，如果我为cat-loto选择1，它将发送正确的数字，即51.79，如果我改变并选择2为#bal_number_of_members，则tmp_value为103.59将乘以2，它将发送给paypal的值为103.59乘以2，应该是103.59。

我根据用户Alain Nisam的回答更新了Javascript文件

js file

 <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('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();
   });

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

Answer 1

Ok Danielle，这是我的最后一个答案 - 我唯一不确定的项目是＆＃34; quantity_2＆＃34;。它设置为1，我不确定它代表什么意思。

bin

Answer 2

已更新以使用正确的字段：

<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('shana@same.org');
    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>

提交到Paypal时，Javascript表单提交数据不会更改

2 个答案: