CODEWITHSUNDEEP
javascriptjqueryhtmlformsvariables
user1893648
user1893648

Reputation: 1

how do I correctly pass a JavaScript value that has been adjusted via if...else back into my web-page before it is submitted to my payment portal?

I have an online payment form which my clients can use to pay me via a hosted payment portal. If a client pays by debit-card there is no additional fee incurred. However, if a client pays via credit-card they are charged an additional 2.5% admin fee. I have created a basic form which follows the same structure and have used pop-ups to show that they correct value is held. The problem that I am having is that when I then try and pass that value to the payment-portal I am given a 'Fault 8' code. I have tried to resolve the problem with the provider of the payment solution but they have been less than helpful and I am not keen to upgrade to their 'premium plan' and another 12 months of trouble.

The basic form is:

<HTML> <HEAD> <TITLE>Test Input</TITLE>

<SCRIPT LANGUAGE="JavaScript">

function cardHandlingFee (form) {   var Notes = form.Notes.value;   var amountPaid = form.amountPaid.value;     var clientname = form.clientname.value;     var CustomerEmail = form.CustomerEmail.value;   var percent = 0.025;    var CreditCardCharge;   var totalCharge;

if ( Notes == "Debit Card" )    {       TransactionAmount = amountPaid;         alert ("You typed: " + TransactionAmount);  }   else    {       CreditCardCharge = amountPaid * percent;                totalCharge = parseFloat(amountPaid) + parseFloat(CreditCardCharge);        TransactionAmount = totalCharge.toFixed(2);         alert ("You typed: " + TransactionAmount);  } }

</SCRIPT> </HEAD> <BODY>

<form id="contactform" action="https://(PAYMENT-SOLUTION DETAILS)" method="POST" name="confirm">Enter something in the box: <BR> <p class="padding:2px"> <select id="CardType" name="Notes" required> <option value="Credit Card">Credit Card</option> <option value="Debit Card">Debit Card</option> </select></p>

<p class="padding:2px"><input id="amountPaid" type="number" name="amountPaid" min="0" max="9999" step="0.01" size="4" /> <script type='text/javascript'>
      quote = 'This is the quote of the day!';
      document.contactForm.TransactionAmount.value = TransactionAmount;
      alert(document.contactForm.TransactionAmount.value);
    </script>


<p class="padding:2px">Clients full name*<br /><input type="text" name="clientname" value="" /></p>

<p class="padding:2px">Your email address*<br /><input type="email" name="CustomerEmail" value="" /></p>

<input type="submit" onClick="cardHandlingFee(this.form);" value="Submit Card" />

<input type="hidden" name="CustomerID" value="(CLIENT CUS ID)" /> <input type="hidden" id="TransactionAmount" name="TransactionAmount" /> <input type="hidden" name="TransactionCurrency" value="826" /> <input type="hidden" name="RedirectorSuccess" value="http://(CLIENT SITE)/success" /> <input type="hidden" name="RedirectorFailed" value="http://(CLIENT SITE/failed" /> </FORM>

</BODY> </HTML>

I would greatly appreciate any help in either solving the problem with this or another method. This is within my WordPress site. I have tried Jquery, Jscript, .innerHTML but I am now stumped.

Upvotes: 0

Views: 78

Answers (1)

Beetroot-Beetroot
Beetroot-Beetroot

Reputation: 18078

As far as I can tell, you're nearly there. You just need to add the following line immediately after the if(){...} else{...} structure :

form.TransactionAmount.value = TransactionAmount;

One other thing, as form.Notes is a select menu, form.Notes.value will only work in some browsers. You should make the following change.

//var Notes = form.Notes.value;
var Notes = form.Notes[form.Notes.selectedIndex].value;

Upvotes: 1

Related Questions