Simple help needed for PayPal button, HTML caclulations Options

[ForwardIT]

Hi there.

I have been wandering around the tutorials and examples and trying to get a simple variable calculation done in the html code below but can't seem to get it right.

The html code below works fine now to create a button for PayPal and submit an order.
The problem is, I need the "amount_2" to actually be calculated to 2% of "amount_1".
a simple, "amount_2" = "amount_1" * 0.02
This is to allow us to take payment with PayPal and add their merchant fees.

Can anyone help please


------------------------------------------
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="upload" value="1">
<input type="hidden" name="business" value="accounts@example.com">
<input type="hidden" name="currency_code" value="AUD">
<input type="hidden" name="item_name_1" value="My Invoice">
<input type="hidden" name="amount_1" value="1885.00">
<input type="hidden" name="item_name_2" value="Merchant Fee">
<input type="hidden" name="amount_2" value="9999">
<input type="image" src="http://www.paypal.com/en_US/i/btn/x-click-but01.gif" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
</form>
------------------------------------------

[pandy]

You need JavaScript for this, so I move the thread to the client side scripting forum.

I changed your email in the form to stop spam bots from picking it up. Well, they will anyway if you use that form on the web, but not from here.

[pandy]

Here's a simple way of doing it. I don't know if you have more than one form, so to be safe I gave your form an id.

Here are the changes to the HTML, the id and the onsubmit at the end of the tag.

HTML

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" id="pp" onsubmit="addFee()">

Oh, I would leave the value of amount_2 blank. Not that I think it matters, just looks neater.

HTML

<input type="hidden" name="amount_2" value="">

And this is the script. Put it in a code block in head or in an external JS file. You can remove the comments before using it if you want.

CODE

function addFee()
{
     // Get the price of the item
     var baseprice = document.forms['pp'].elements['amount_1'].value;
    
     // Calculate the fee
     var fee = 0.02 * baseprice;
    
     // Set the value of the amount_2 field to the fee
     document.forms['pp'].elements['amount_2'].value = fee;
    
     // Makes sure the form submits
    return true;
}

You should be aware that this won't work if JavaScript isn't available to the user. To be 100% sure you need server side scripting. But JS is good enough for most of us and PP uses JS anyway so... You can always add a line with info about how to contact you if there is a problem.

[Christian J]

The above seem to work, just curious: why do you use document.forms['pp'] to access the form element's ID? Isn't it usually used together with the NAME attribute?

[pandy]

I didn't want to add a name to FORM and I've always thought either could be used in this JS construct. Isn't that right?

I'm actually unsure about the return true though, if it's really needed. I've always done it like this, but changing return to false doesn't stop the form from being submitted. Shouldn't it?

[Christian J]

I didn't want to add a name to FORM and I've always thought either could be used in this JS construct. Isn't that right?

No idea.

I'm actually unsure about the return true though, if it's really needed. I've always done it like this, but changing return to false doesn't stop the form from being submitted. Shouldn't it?

I think the default is to submit the form, but to prevent a form from submitting you may need to use a return in the function call as well:

CODE

onsubmit="return addFee()"

(and a return false in the script). See also
http://www.quirksmode.org/js/forms.html#onsubmit
http://www.javascriptkit.com/javatutors/form6.shtml

[pandy]

Ah, that's probably it. But in that case the return true as I used it isn't redundant, right?

[Christian J]

But in that case the return true as I used it isn't redundant, right?

Actually I don't think it's needed even when you use an

CODE

onsubmit="return addFee()"

[pandy]

Typo. Was meant to be "But in that case the return true as I used it IS redundant...".

That darn return... never get a full grip on it and it's darn hard too google!

Well, the script works with and without the return true anyway!

[Christian J]

It does seem to submit the form. Consider this contrived example:

CODE

    
foo.value =1;
return true; // submits the above foo value
foo.value = 2; // change the value of foo (this is never submitted)

When I tested the above it seems "return true" submitted the form, so the new foo value was not used . Not sure when the above could be useful, though.

[pandy]

No, but it's interesting.

[ForwardIT]

Here's a simple way of doing it. I don't know if you have more than one form, so to be safe I gave your form an id.

CODE

<!DOCTYPE html>
<html>
<body>

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" id="pp" onsubmit="addFee()">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="upload" value="1">
<input type="hidden" name="business" value="accounts@freelanceswitch.com">
<input type="hidden" name="currency_code" value="AUD">
<input type="hidden" name="item_name_1" value="My Invoice">
<input type="hidden" name="amount_1" value="1885.00">
<input type="hidden" name="item_name_2" value="Merchant Fee">
<input type="hidden" name="amount_2" value="">
<input type="image" src="http://www.paypal.com/en_US/i/btn/x-click-but01.gif" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
</form>


<script>
function addFee()
{
     // Get the price of the item
     var baseprice = document.forms['pp'].elements['amount_1'].value;
    
     // Calculate the fee
     var fee = 0.02 * baseprice;
    
     // Set the value of the amount_2 field to the fee
     document.forms['pp'].elements['amount_2'].value = fee;
    
     // Makes sure the form submits
    return true;
}
</script>

</body>
</html>

Thank you so much Pandy, works perfectly !!! Love your work !!!

[pandy]

Good it worked for you.