CODEWITHSUNDEEP
javascriptwordpressinput
Alex Afonso
Alex Afonso

Reputation: 11

Ask user for amount and user value in a form

I'm trying to integrate a payment method called SiamPay on my website but I don't know javascript :(

On SiamPay website they have this instructions:

Copy the following program code to your payment page and dynamic generate the Amount show below by yourself 

<form name="payForm" method="post" action="https://www.siampay.com/b2c2/eng/payment/payForm.jsp">
<input type="submit" name="submit" value="Buy">
<input type="hidden" name="amount" value="Amount">
<input type="hidden" name="merchantId" value="76117579">
<input type="hidden" name="orderRef" value="76117579">
<input type="hidden" name="currCode" value="764" >
<input type="hidden" name="successUrl" value="">
<input type="hidden" name="failUrl" value="">
<input type="hidden" name="cancelUrl" value="">
<input type="hidden" name="remark" value="">
<input type="hidden" name="lang" value="E">
<input type="hidden" name="payMethod" value="ALL">
</form>

Example in jsp: 

<% 
double amount = qty * unitPrice ;
%>

<form name="payForm" method="post" action="https://www.siampay.com/eng/payment/payForm.jsp">
<input type="submit" name="submit" value="Buy">
<input type="hidden" name="amount" value="<%= amount %>">
<input type="hidden" name="merchantId" value="76117579">
<input type="hidden" name="orderRef" value="76117579">
<input type="hidden" name="currCode" value="764" >
<input type="hidden" name="successUrl" value="">
<input type="hidden" name="failUrl" value="">
<input type="hidden" name="cancelUrl" value="">
<input type="hidden" name="remark" value="">
<input type="hidden" name="lang" value="E">
</form>

I would like to create a field where the user can input an amount to pay in THB (Thai currency) and transport that value to this field: < input type="hidden" name="amount" value="<%= amount %>">.

I think this is relatively easy but because I never user javascript I'm a little confused.

I appreciate any help.

Thank you so much.

Best Regards, Alex

Upvotes: 0

Views: 75

Answers (3)

BlueMystic
BlueMystic

Reputation: 2287

try something like this:

<form name="payForm" method="post" action="https://www.siampay.com/eng/payment

/payForm.jsp">
<input type="submit" name="submit" value="Buy">
<input type="hidden" id="amount" value="<%= amount %>">
<input type="hidden" name="merchantId" value="76117579">
<input type="hidden" name="orderRef" value="76117579">
<input type="hidden" name="currCode" value="764" >
<input type="hidden" name="successUrl" value="">
<input type="hidden" name="failUrl" value="">
<input type="hidden" name="cancelUrl" value="">
<input type="hidden" name="remark" value="">
<input type="hidden" name="lang" value="E">
</form>

<button id='cmdSend'>Click me</button> 
<input id='howmuch' type="number" name="amount" value=1000>

And the JS:

document.getElementById("cmdSend").addEventListener("click", myFunction);
function myFunction() {
    document.getElementById("cmdSend").innerHTML = "YOU CLICKED ME!";

    //Get the value the user typed:
    var Value = document.getElementById("howmuch").value;
    console.log(Value);

    //Set the value into the hidden input, can be done in 2 ways:
    document.getElementById("amount").value = Value;
    document.getElementById("amount").setAttribute('value',Value);

    //Check the value got assigned:
    console.log(document.getElementById("amount").value);
}

Fiddle here: https://jsfiddle.net/s2ztkn8L/

Upvotes: 0

inuYasha
inuYasha

Reputation: 11

To set value to an element, you can use the document.getElementById().value function. Set the amount data into the Amount variable as shown below.

var Amount = 123;

Also, modify the input tag for the amount to include the same id:

<input type="hidden" name="amount" id="amtId" value="Amount">


var Amount = 123;

function setAmountValue() {
  document.getElementById('amtId').value = Amount;
}
<form name="payForm" method="post" action="https://www.siampay.com/b2c2/eng/payment/payForm.jsp">
  <input type="submit" name="submit" value="Buy" onclick="setAmountValue();">
  <input type="hidden" name="amount" id="amtId" value="Amount">
  <input type="hidden" name="merchantId" value="76117579">
  <input type="hidden" name="orderRef" value="76117579">
  <input type="hidden" name="currCode" value="764">
  <input type="hidden" name="successUrl" value="">
  <input type="hidden" name="failUrl" value="">
  <input type="hidden" name="cancelUrl" value="">
  <input type="hidden" name="remark" value="">
  <input type="hidden" name="lang" value="E">
  <input type="hidden" name="payMethod" value="ALL">
</form>

Upvotes: 0

Bhaskar Choudhary
Bhaskar Choudhary

Reputation: 159

There's no need to create an extra input field. You have to change the name=amount input's type to number so that it will become visible to the user. Now the user can enter a number of their choice and click the pay button to submit the payment form.

<form name="payForm" method="post" action="https://www.siampay.com/eng/payment/payForm.jsp">
    <input type="submit" name="submit" value="Buy">
    <input type="number" name="amount" value="" placeholder="Enter amount in THB ">
    <input type="hidden" name="merchantId" value="76117579">
    <input type="hidden" name="orderRef" value="76117579">
    <input type="hidden" name="currCode" value="764" >
    <input type="hidden" name="successUrl" value="">
    <input type="hidden" name="failUrl" value="">
    <input type="hidden" name="cancelUrl" value="">
    <input type="hidden" name="remark" value="">
    <input type="hidden" name="lang" value="E">
</form>

Upvotes: 1

Related Questions