Create form to generate a URL

Question

Ive started the form I need, however having difficulty with the data being inserted into the URL.

I need to gather the following information and insert it into the following link, which the user can then copy upon clicking generate.

Appreciate support

Client First Name
Client Last Name
Order Reference
Main Amount
Todays Date

//payments.XXXXX.net/process/payments/choice?charset=UTF-8&billingemail=&billingfirstname=Joe&billinglastname=Bloggs&currencyiso3a=GBP&locale=en_GB&mainamount=1000.00&orderreference=12345&settleduedate=2022-07-27&settlestatus=0&sitereference=&stprofile=default&version=2

function process() {
  var url =
    location.href = url;
  return false;
}

<form onSubmit="return process();">
  <input type="text" name="Payment Amount" id="amount">
  <input type="text" name=“Client First Name” id="fname">
  <input type="text" name=“Client Last Name” id="sname">
  <input type="text" name=“Booking Reference” id="bookref">
  <input type="submit" value="Create Unique Payment Link">
</form>

Answer 1

You can use the URL api and the searchParams

I choose clipboard.js plugin since it seems to be quite cross browser

// Example link
//payments.XXXXX.net/process/payments/choice?charset=UTF-8&billingemail=&billingfirstname=Joe&billinglastname=Bloggs&currencyiso3a=GBP&locale=en_GB&mainamount=1000.00&orderreference=12345&settleduedate=2022-07-27

const yyyymmdd = () => new Date().toISOString().split('T')[0]; // format date
const generated = document.getElementById("generated");        // the textarea
const copyButton = document.getElementById("copy");            // the button that will copy from the textarea
const form = document.getElementById("urlForm");               // the form to use
const clipboard = new ClipboardJS('#copy');                    // instantiate the clipboard plugin

form.addEventListener("submit", (e) => { // when submitting
  e.preventDefault(); // stop the submit
  const url = new URL("https://payments.XXXXX.net/process/payments/choice?settlestatus=0&sitereference=&stprofile=default&version=2&currencyiso3a=GBP&locale=en_GB&charset=UTF-8"); // as much static parameters as needed
  const sp = url.searchParams; // the searchParams object to modify
  sp.set("billingemail", "");  // perhaps you want to ask for that too?
  sp.set("billingfirstname", form.fname.value);
  sp.set("billinglastname", form.sname.value);
  sp.set("mainamount", form.amount.value);
  sp.set("settleduedate", yyyymmdd());
  sp.set("orderreference", form.bookref.value)
  generated.value = url.toString(); // show the URL
  // form.action = url.toString();  // uncomment to go to the link instead 
})

#generated,
#copy {
  display: inline-block;
  vertical-align: middle;
}

<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.10/dist/clipboard.min.js"></script>

<form id="urlForm">
  Amount:<br>
  <input type="text" name="Payment Amount" id="amount"><br/> First name:<br/>
  <input type="text" name="Client First Name" id="fname"><br/> Surname:
  <br/>
  <input type="text" name="Client Last Name" id="sname"><br/> Booking reference:<br/>
  <input type="text" name="Booking Reference" id="bookref"><br/>
  <input type="submit" value="Create Unique Payment Link">
</form>
<hr/>

<textarea id="generated"></textarea><button id="copy" data-clipboard-target="#generated"><b>⧉</b></button>