Danielle Rose Mabunga
Reputation: 1724
Javascript form submit data not changing when submitting to Paypal
I have a form that will send the calculated amount to paypal.There are three radio button for this, I have no problem when selecting the first button, it will correctly calculate and send the correct data to paypal.The second and third is my problem, when I select either second and third, the previous value or data from first button will be send to paypal instead of the second or third value..This is a working form except that it does not send the proper amount to Paypal if I select the other radio button(#cat-both is working properly while #cat-loto and #cat-aerial were not submitting the correct value,the value of #cat-both is always send to paypal instead) (This is a question answered by user 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 & 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>
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>
A working fiddle
Update
I found out that the input name="amount_1" value="90" does not change to the amount equivalent to
var amount = trainthetrainerForm_calculateItemAmount();
Inside the
submitTrainthetrainerForm()
function
form action
action="https://www.paypal.com/cgi-bin/webscr"
Any idea for this?
Update
Ok I think I almost solve this problem.The #cat-loto and #cat-aerial value already sending to paypal, but if I choose 2, 3, 4, 5 from the select #bal_number_of_members, the previous value will be multipled by the select #bal_number_of_members.Example, if I select 1 for cat-loto, it will send the proper number which is 51.79, how ever if I change and select the 2 for #bal_number_of_members, the tmp_value which is 103.59 will be multiplied by 2 and it will send to paypal the value of 103.59 multiplied by 2, it should be 103.59.
I updated the Javascript file based on user Alain Nisam answer
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('[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();
});
});
Upvotes: 2
Views: 189
Answers (2)
Alain Nisam
Reputation: 680
Ok Danielle, this is my last answer- The only item I was unsure of is "quantity_2". It's set to 1 and I'm not sure what it's meant to represent.
<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 & 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 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>
Upvotes: 1
Alain Nisam
Reputation: 680
Updated to use the correct field:
<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 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>
Upvotes: 0
Related Questions
- Convert form data to JavaScript object with jQuery
- Why does my JavaScript code receive a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error, while Postman does not?
- jQuery AJAX submit form
- JavaScript post request like a form submit
- How to check a not-defined variable in JavaScript
- How to execute a JavaScript function when I have its name as a string
- HTML button to NOT submit form
- Can I make a <button> not submit a form?
- Submit PayPal form using JS not working