HTML FORM + pureJS Auto multiply script

I have a simplified HTML form that I would like to multiply entered amount by 100 and send it with GET method to any endpoint.

Here is my form:

<body>
    <form method="get" action="https://endpoint/purchase.php">
        <input type="text" name="description" value="description">
    <input type="text" name="amount">
    <input type="submit" value="pay">
    </form>
</body> 

And my Js

var $output = $("#output-value");
$("#input-value").keyup(function() {
    var value = parseFloat($(this).val());
    $output.val(amount*100);
});

I’m stuck here, as I don’t know how to connect them to send a proper value where I want?

Thank You. That helps a lot, I have another problem, where, in which the URL passed in GET is shortened / cut out?

So below is an original URL

https://sklep.przelewy24.pl/zakup.php?z24_id_sprzedawcy=88696&z24_kwota=10000&z24_currency=pln&z24_nazwa=test&z24_opis=test&z24_return_url=http%3A%2F%2Fwww.przelewy24.pl&z24_language=pl&k24_kraj=PL&z24_crc=ca056736&

I would like to be able to dynamiclly trnasfer z24_kwota (/z24_amount) so my form can transfer the amount as I want.
After tweaking the code above to my needs:

<html>
<head>
<meta charset="utf-8">
<title>Formularz uproszczony</title>
</head>

<body>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    
    </script>
<form id="testForm" method="get" action="https://sklep.przelewy24.pl/zakup.php?z24_id_sprzedawcy=88696&z24_currency=pln&z24_nazwa=test&z24_opis=test&z24_return_url=http%3A%2F%2Fwww.przelewy24.pl&z24_language=pl&k24_kraj=PL&z24_crc=ca056736&">
  <input type="text" name="z24_kwota" value="Kwota">
  
  <input type="submit" value="zapłać ">
  <script>
        $("#testForm").on('submit', function() {
  var amount = $("#testForm input[name='z24_kwota']")
  var value = parseFloat(amount.val());
  value = value * 100 || 0; // set zero for non number

  if (prompt("Kwota przekazywana do Przelewy24 to: ", value)) {
    amount.val(value);
    return true
  } 
  else {
    console.log('submission aborted, value not multiplied')
    return false;
  }

});</script>
</form>
    
</body>
</html>

I see that only first part is in the browser adress bar:
”’https://sklep.przelewy24.pl/zakup.php?z24_kwota=2000”’
Can someone tell me why that is, and how to fix it ?

3 thoughts on “HTML FORM + pureJS Auto multiply script”

  1. This is common problem, please see browser console (F12) and check for error, you don’t have element with ID #input-value, #output-value and variable amount

    if you want to change input name amount before submit use submit event

    $("#testForm").on('submit', function() {
      var amount = $("#testForm input[name='amount']")
      var value = parseFloat(amount.val());
      value = value * 100 || 0; // set zero for non number
    
      if (prompt("amount value now: ", value)) {
        amount.val(value);
        return true
      } 
      else {
        console.log('submission aborted, value not multiplied')
        return false;
      }
    
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <form id="testForm" method="get" action="https://endpoint/purchase.php">
      <input type="text" name="description" value="description">
      <input type="text" name="amount">
      <input type="submit" value="zapłać z przelewy24.pl">
      </form>
    Reply

Leave a Comment