Click here to Skip to main content
15,919,931 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have a javascript function in htlm page to call up an API page, but when I click submit button it does not fire. Can anyone look at my code and tell me what is wrong.

below is my code.

<!DOCTYPE html>
<html lang="en">
<HEAD>
<TITLE>SQUAD</TITLE>
<!-- bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


</HEAD>
<BODY>
  <form style="padding-left: 30px;" class="text-center">
      <div class="text-left" style="color:red; font-family: Verdana; font-size: 30px;">SAMPLE CHECKOUT</div>
      <h6>Note: Amount should be between $1 to $10,000 (USD), NGN100 to NGN5,000,000 and KSH100 to KSH5,000,000</h6>
      <div class="row text-center">
        <div class="col-lg-4">
            <label for="email">Email Address</label>
            <input type="email" id="email-address" class="form-control" required /><br>
        </div>
        <div class="col-lg-4">
            <label for="amount">Amount</label>
            <input type="tel" id="amount" class="form-control" required /><br>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-4">
            <label for="first-name">First Name</label>
            <input type="text" id="first-name" class="form-control" /><br>
        </div>
        <div class="col-lg-4">
            <label for="last-name">Last Name</label>
            <input type="text" id="last-name" class="form-control" /><br>
        </div>
      </div>
      <div class="col-lg-4">
        <div class="form-submit">
          <button type="button" onclick="SquadPay()" class="btn btn-danger">Submit</button><br><br>
        </div>
      </div>
    </div>
  </form>

  <script type = "text/javascript">
      function SquadPay() {
  const squadInstance = new squad({
    onClose: () => console.log("Widget closed"),
    onLoad: () => console.log("Widget loaded successfully"),
    onSuccess: () => console.log(`Linked successfully`),
    key: "sandbox_pk_3fae7c45922315aa8cb2b80cb138ff7952084db2fe54",
    //Change key (test_pk_sample-public-key-1) to the key on your Squad Dashboard
    email: document.getElementById("email-address").value,
    amount: document.getElementById("amount").value * 100,
    //Enter amount in Naira or Dollar (Base value Kobo/cent already multiplied by 100)
    currency_code: "NGN"
  });
  squadInstance.setup();
  squadInstance.open();
}
  </script>

</BODY>
</HTML>


What I have tried:

I tried moving the javascript function to header area, but it didn't fire.
Posted
Comments
Richard Deeming 5-Dec-22 4:18am    
Check your browser's developer console for errors. The only obvious thing is that you're creating an instance of squad, but you haven't defined it anywhere, and you haven't included any external scripts where it might be defined.
Member 15627495 5-Dec-22 5:47am    
your const 'squadinstance' is inside a function
use :
 var squadinstance = .... instead of 'const'

because like you do, at the end of the function squad is not visible for all your page.
var myVar ,is for 'in all the page access to the var', it's global var.
Member 15627495 5-Dec-22 5:50am    
to trace your vars, for a better debug : use console.log( theVar_tocheck ) ; or console.table( for_array_to_check );

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900