Ask user for amount and user value in a form

Question

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

score 1 · Accepted Answer · answered Nov 15 '18 at 18:35

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>

Amazing Bhaskar :) That's exactly that :) Now how can the number have a decimal value? like 1500.47 THB? Thanks a lot — Alex Afonso, Nov 15 '18 at 18:39
@AlexAfonso Please refer to https://stackoverflow.com/questions/19011861/is-there-a-float-input-type-in-html5 All you have to do is add attribute **step="0.01"** to the input element. — Bhaskar Choudhary, Nov 19 '18 at 09:21

Jhollman · Answer 2 · 2018-11-15T18:55:39.153

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/

notice that i changed the 'name' attribute for 'id'. i realize i also could add it like: — Jhollman, Nov 15 '18 at 18:42

score 0 · Answer 3 · answered Nov 15 '18 at 18:43

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>

Thanks for the reply :) In that case the amount will be always 123, I'm I right? The idea is ask the user for an amount. Bhaskar method solve the problem, and I add step="any" in this line to accept floating values. Anyway thank you so much for the help :) — Alex Afonso, Nov 15 '18 at 19:08
Ohkay, I asumed that the amount will be passed to "Amount" variable through code. I see now that you have mentioned the exact requirement in the question! Thanks for the comment! — inuYasha, Nov 16 '18 at 15:56

Ask user for amount and user value in a form

3 Answers3