javascript form calculations then submit the result in a hidden field

plugger · Nov 10, 2016

I want to give a free product to my customers, all i want is for them to pay the postage via worldpay

I have the following form, and im trying to get a dropdown option to calculate with a text input field then put the total into another field before submitting the result, anyone have any ideas how i can achieve this please

Code:

<form action="rbsworldpay/wcc/purchase" method=POST>
    <input type=hidden name="instId" value="yourid">
    <input type=hidden name="cartId" value="cartid">



<!-- If debit card seleted then add 0 to total price -->
<!-- If credit card seleted then add 2.50 to total price -->
<select id="cardtype" name="cardtype" onchange="calculateTotal()">
                <option value="None">Select your card type</option>
                <option value="0">Debit Card</option>
                <option value="2.5">Credit Card</option>
               </select>


<!-- amount inputed by user -->
Please enter the Amount you are Paying
<input style="border: 1px solid #cccccc;" name="amountpaying" type="text" value="" />



<!-- field total to send to worldpay **** can be hidden -->
<input style="border: 1px solid #cccccc;" name="amount" type="text" value="" />



<input name="currency" type="hidden" value="GBP" />
<input type="submit" value="Confirm you Payment" />
</form>
</form>

garyk · Nov 10, 2016

You need to grab the value from one form field and then set the value of the other, using good old Javascript. Here is what you need:

Add name property to your form:

HTML:

<form action="rbsworldpay/wcc/purchase" name="formPay" method=POST>

Add an onchange handler to your 'amount' input text:

HTML:

<input style="border: 1px solid #cccccc;" name="amountpaying" type="text" value="" onchange="calcValue()"/>

And put the following in the <head>

Code:

<script type="text/javascript">
    function calcValue() {
        // Get value from form
        payAmount = document.formPay.amountpaying.value;
        payAmount = payAmount * 0.2; // or whatever calc you need to do
        // Set value of hidden field
        document.formPay.amount.value = payAmount
    }
</script>

Untested so give ti a whirl!

plugger · Nov 10, 2016

yes that works with the caclulation, but i need it to check the dropdown field

Code:

<!-- If debit card seleted then add 0 to total price -->
<!-- If credit card seleted then add 2.50 to total price -->
<select id="cardtype" name="cardtype" onchange="calculateTotal()">
                <option value="None">Select your card type</option>
                <option value="0">Debit Card</option>
                <option value="2.5">Credit Card</option>
               </select>

and then the amount will be either * 0 or amount * 2.5

garyk · Nov 10, 2016

Ahh just get the value from that then:

if document.formPay.cardtype.value != "None" {
payAmount = document.formPay.amountpaying.value * document.formPay.cardtype.value
}

plugger · Nov 10, 2016

sorry for being a bit thick but this causes an error in dreamweaver, and it doesnt get the value when hitting submit either

Code:

<script type="text/javascript">
    function calcValue() {
        // Get value from form
        payAmount = document.formPay.amountpaying.value;
        payAmount = payAmount + "cardtype" ; // or whatever calc you need to do
        // Set value of hidden field
        document.formPay.amount.value = payAmount
    }
    if document.formPay.cardtype.value != "None" {
payAmount = document.formPay.amountpaying.value * document.formPay.cardtype.value
}   

   
</script>

garyk · Nov 10, 2016

Just noticed in your code you have:

</form>
</form>

you only need one.

plugger · Nov 10, 2016

yes i know i took it out, but that javascript still doesnt work

garyk · Nov 10, 2016

Whats the error? I cant test it but google will get you the rest of the way

plugger · Nov 10, 2016

plugger said:

sorry for being a bit thick but this causes an error in dreamweaver, and it doesnt get the value when hitting submit either

Code:

<script type="text/javascript">
    function calcValue() {
        // Get value from form
        payAmount = document.formPay.amountpaying.value;
        payAmount = payAmount + "cardtype" ; // or whatever calc you need to do
        // Set value of hidden field
        document.formPay.amount.value = payAmount
    }
    if document.formPay.cardtype.value != "None" {
payAmount = document.formPay.amountpaying.value * document.formPay.cardtype.value
}  

  
</script>

^^^^^^^^ the java in dreamweaver has an error, maybe i havent inserted the if document.... in the correct place

Search

Search

javascript form calculations then submit the result in a hidden field

plugger

garyk

plugger

garyk

plugger

garyk

plugger

garyk

plugger

Similar threads

Latest Articles