HTML and Javascript Modify before POST form values

Question

Hi everyone.

Sorry if the question seems stupid, I'm fairly new with the use of Javascript/HTML...

I'm face to an issue for a paypal integration. I have done it before but with just one unique price which is very simplier than my new need.

Now I have to compute a price that depends on a user's input (choose option 1/2/3/etc...).

So I try to modify the form's data before sending it to paypal.

Here is some code: The form:

    <form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post" target='_new' id='paypalForm'>
<input name="submit" type="image" src="paypal__secure_logo.jpg" alt="PayPal Secured Paiement" align="middle" border="0"  onClick="compute()" />
                      <!---  <input type='hidden' value="3" name="amount" id= "000" /> --->
                        <input type="radio" name="custom" value="60"  >One Hour<br>
<input type="radio" name="custom" value="1400">1 Day<br>
<input type="radio" name="custom" value="10800">1 Week<br>
                        <input name="currency_code" type="hidden" value="<?php echo "EUR"; ?>" />
                        <input name="shipping" type="hidden" value="<?php echo "00.00"; ?>" />
                        <input name="tax" type="hidden" value="00.20" />
                        <input name="return" type="hidden" value="<?php echo "http://www.web.com/login.php"; ?>" />
                        <input name="cancel_return" type="hidden" value="<?php echo "http://www.web.com/cancel.php"; ?>" />
                        <input name="notify_url" type="hidden" value="<?php echo "http://www.web.com/ipn.php"; ?>" />
                        <input name="cmd" type="hidden" value="_xclick" />
                        <input name="business" type="hidden" value="<?php echo "XXXXXXXXXXX"; ?>" />
                        <input name="item_name" type="hidden" value="camp" />
                        <input name="no_note" type="hidden" value="1" />
                        <input name="lc" type="hidden" value="EN" />
                        <input name="bn" type="hidden" value="PP-BuyNowBF" />
</form>

And the javascript part:

    <script >
    function compute(){
    var formToSubmit = document.getElementsByName('paypalForm');    
    var radios = document.getElementsByName('custom');
    var price = 0;


for (var i = 0, length = radios.length; i < length; i++) { 
        if (radios[i].checked) {
            if (radios[i] = "60"){
            ///document.getElementsByName("amount").value = "4";
            price = "4";
            ///alert(document.getElementsByName("amount").value);
            }else if (radios[i] = "1400"){
                price = "10";
            ///document.getElementsByName("amount").value = "10";
            }else if (radios[i] = "10800"){
            ///document.getElementsByName("amount").value = "25";
            price = "25";
            }
            alert('Submitted')
            formToSubmit.append('<input type="hidden" name="amount" value="'+price+'" />');
            formToSubmit.submit();
            // only one radio can be logically checked, don't check the rest
            break;
        }
    }
    };
    </script>

I do see that the javascript is executed because the commented alert is shown.

But i can't get the amount to be updated (I tried to update amount first with "document.getElementsByName("amount").value = "25";" before trying to add the entire form element by javascript with the "formToSubmit.append('

With the "document.getElementsByName("amount").value = "25";" the price is apparently changed because I see it in the alert dialog but the POST data to paypal say that the new variable set is not taken.

Anyway if you have any advice about securing a paypal form I take because I'm afraid someone could change the POST variable to change the price for example or any over similar attack, for now i just plan to check the custom values returned by paypal and do not give the product (and mail the user )if I see a difference.

I have saw that there is other questions about paypal and forms but I dot not make it working despite a long day of work.

Thank you for reading me, Regards.

[EDIT] Another solution is to use the HTML's option input:

                <select single="single" name="amount">
                      <option value="1">1 Heure - 1 Hour -> 1€</option>
                      <option value="2">2 Heures - 2 Hours -> 2€</option>
                      <option value="4">4 Heures - 4 Hours -> 4€</option>
                      <option value="10">1 Jour - 1 Day -> 10€</option>
                      <option value="15">2 Jours - 2 Days -> 15€</option>
                      <option value="25">1 Semaine - 1 Week -> 25€</option>
                    </select>

And for tax computing use taxe_rate (percents) rather than tax:

<input name="tax_rate" type="hidden" value="20" />

rather than:

<input name="tax" type="hidden" value="20" />

And

for (var i = 0; i < radios.length; i++)

Rather than:

for (var i = 0, length = radios.length; i < length; i++)

Regards !

Answer 1

You have a break in the loop:

// only one radio can be logically checked, don't check the rest
break;

I don't think that will work. If the user clicks the second radio button; the code runs; only the first radio button in the loop gets checked; then the code stops. The code will never check the second radio button. You need to remove the break;.

Either that, or give each radio button a unique ID, and use three If, Then, else statements to check the buttons.

I see three radio buttons:

<input type="radio" name="custom" value="60"  >One Hour<br>
<input type="radio" name="custom" value="1400">1 Day<br>
<input type="radio" name="custom" value="10800">1 Week<br>

They all have the same name. This means, to get all the values out, you need to get all elements of that name, and loop through the array, checking each element in the array. If one of the elements has a value, at that point you can break. Right now, the code breaks on the first iteration. You code should look like this:

if (radios[i] = "60") {
  ///document.getElementsByName("amount").value = "4";
  price = "4";
  ///alert(document.getElementsByName("amount").value);
  break;
} else if (radios[i] = "1400") {
  price = "10";
  ///document.getElementsByName("amount").value = "10";
  break;
} else if (radios[i] = "10800") {
  ///document.getElementsByName("amount").value = "25";
  price = "25";
  break;
}

Put a break; in each IF check, Not outside of the IF check.

An alternative, would be to not use any for loop, and give each INPUT element an id.

<input type="radio" id="idOneHrBttn" value="60"  >One Hour<br>
<input type="radio" id="idOneDayBttn value="1400">1 Day<br>
<input type="radio" id="idOneWeekBttn value="10800">1 Week<br>

Then check each id explicitly:

if (document.getElementsById("idOneHrBttn").checked) {
  price = "4";
  ///alert(document.getElementsById("amount").value);
} else if (document.getElementsById("idOneDayBttn").checked) {
  price = "10";
  ///document.getElementsById("amount").value = "10";
} else if (document.getElementsById("idOneWeekBttn").checked) {
  ///document.getElementsById("amount").value = "25";
  price = "25";
}

This way, you don't need a LOOP.

Answer 2

Are your loop conditions configured correctly?:

for (var i = 0, length = radios.length; i < length; i++) {

There should be a semi-colon after i = 0:

for (var i = 0;

Shouldn't it look like this?:

for (var i = 0; i < radios.length; i++) {

It looks like you are trying to declare two variables in the variables section. I'm not sure if that works or not.