My javascrript function does not fire in HTML

Question

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 4-Dec-22 15:32pm

Member 12652465

Add a Solution

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)

My javascrript function does not fire in HTML

Add your solution here

Preview 0

My javascrript function does not fire in HTML

Add your solution here

Preview 0

Existing Members

...or Join us