Front end is not working with smart contract

i develop a event organiser smartcontract
( bsc testnet: 0x34F04C60439B377E61cf11C4B0e470316c7aED5F) / i want to implement the CreteEvents function with the front end. but when i click confirm its not working(metamask is not popping out to confirm the transaction)

here are Main.js


const serverUrl = "xxxx"

  const appId = "xxxx"

   Moralis.start({serverUrl, appId})

   async function login() {

    let user = Moralis.User.current();

 

    if (!user) {

      try {

        user = await Moralis.authenticate({ signingMessage: ' done' });

 

        console.log(user);

        let addressOfUser= document.getElementById('address')

        addressOfUser.innerHTML="Address:"+(user.get('ethAddress'));

      } catch (error) {

        console.log(error);

      }

    }

  }

 

async function createEvent(){

  await Moralis.enableWeb3();

  let op=  {

    contractAddress: '0x34F04C60439B377E61cf11C4B0e470316c7aED5F',

    functionName:'createEvents',

     abi:[{"inputs":[{"internalType":"string","name":"name","type":"string"},{"internalType":"uint256","name":"date","type":"uint256"},{"internalType":"uint256","name":"price","type":"uint256"},{"internalType":"uint256","name":"ticketCount","type":"uint256"},{"internalType":"uint256","name":"id","type":"uint256"}],"name":"createEvents","outputs":[],"stateMutability":"nonpayable","type":"function"}]

     

  }

   await Moralis.executeFunction(op);

}

 

let cont= document.getElementById('cont')

let btn= document.getElementById('btn').addEventListener('click',()=>{

   

    let nam= document.getElementById('name').value

    let dt= document.getElementById('date').value

    let pri= document.getElementById('price').value

     cont.innerHTML+='<div class="well">'+'project name:'+nam+'<br></br>'+dt+pri+'</div>'+'<br></br>'

})

document.getElementById('logn').onclick= login;

document.getElementById('btn').onclick=createEvent;

here is html file

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="stile.css">

    <link href="p.min.css" rel="stylesheet">

     <!-- INSTALL THE SDK and WEB3 -->

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

        <script src="https://unpkg.com/moralis/dist/moralis.js"></script>

        <!-- / -->

    <title>Document</title>

</head>

<body>

   

   <div><button id="logn">login</button></div>

   <div id="address"> </div>

   <p>Create event </p>

    <input type="text" placeholder="name" id="name">

    <div><input type="text" placeholder="date" id="date"></div>

    <div ><input type="text " placeholder="price" id="price"></div>

   

    <button type="submit" id="btn">confirm</button>

<div id="cont"></div>

<script src="main.js"></script>

</body>

</html>

You can check your console for possible errors.
According to your createEvent function, you didn’t have params in your option passed to the executeFunction which is required according to your abi

can u show me? how to put all the params? do i need all the fields as input

console says:

main.js:35 Uncaught (in promise) 
1. ['name is required', 'date is required', 'price is required', 'ticketCount is required', 'id is required']

  1. 0: "name is required"
  2. 1: "date is required"
  3. 2: "price is required"
  4. 3: "ticketCount is required"
  5. 4: "id is required"

You can have such as your options:

let op = {
  contractAddress: "0x34F04C60439B377E61cf11C4B0e470316c7aED5F",
  functionName: "createEvents",
  abi: YOUR_ABI,
  params: {
    name: NAME_VALUE_TO_BE_SENT_TO_CONTRACT,
    date: DATE_VALUE_TO_BE_SENT_TO_CONTRACT,
    price: PRICE_VALUE_TO_BE_SENT_TO_CONTRACT,
    ticketCount: TICKETCOUNT_VALUE_TO_BE_SENT_TO_CONTRACT,
    id: ID_VALUE_TO_BE_SENT_TO_CONTRACT,
  },
};

You can find an example here: https://docs.moralis.io/moralis-dapp/web3/web3#example-of-calling-a-write-contract-method

console says:

moralis.js:42736 Uncaught (in promise) Error: invalid BigNumber string (argument="value", value="DATE", code=INVALID_ARGUMENT, version=bignumber/5.6.0)
    at Logger.makeError (moralis.js:42736:21)
    at Logger.throwError (moralis.js:42745:20)
    at Logger.throwArgumentError (moralis.js:42748:21)
    at BigNumber.from (moralis.js:35229:27)
    at NumberCoder.encode (moralis.js:32354:39)
    at moralis.js:31974:19
    at Array.forEach (<anonymous>)
    at pack (moralis.js:31960:12)
    at TupleCoder.encode (moralis.js:32493:33)
    at AbiCoder.encode (moralis.js:31625:15)

i would appropriate it u could finish the code,

Looks like you passed an incorrect value as the date value

sir can u plz complete the code so that i can learn an practice, it would be great help.

Here is a patch to that

  <body>
    <div><button id="logn">login</button></div>

    <div id="address"></div>

    <p>Create event</p>

    <input type="text" placeholder="name" id="name" />

    <div><input type="number" placeholder="date" id="date" /></div>

    <div><input type="number" placeholder="price" id="price" /></div>

    <div>
      <input type="number" placeholder="ticketCount" id="ticketCount" />
    </div>

    <div><input type="number" placeholder="id" id="id" /></div>

    <button type="submit" id="btn">confirm</button>

    <div id="cont"></div>

    <script src="main.js"></script>
  </body>
async function createEvent(name, date, price, ticketCount, id) {
  await Moralis.enableWeb3();

  let op = {
    contractAddress: "0x34F04C60439B377E61cf11C4B0e470316c7aED5F",
    functionName: "createEvents",
    abi: [
      {
        inputs: [
          { internalType: "string", name: "name", type: "string" },
          { internalType: "uint256", name: "date", type: "uint256" },
          { internalType: "uint256", name: "price", type: "uint256" },
          { internalType: "uint256", name: "ticketCount", type: "uint256" },
          { internalType: "uint256", name: "id", type: "uint256" },
        ],
        name: "createEvents",
        outputs: [],
        stateMutability: "nonpayable",
        type: "function",
      },
    ],
    params: {
      name,
      date,
      price,
      ticketCount,
      id,
    },
  };

  await Moralis.executeFunction(op);
}

let cont = document.getElementById("cont");

let btn = document.getElementById("btn").addEventListener("click", async () => {
  let nam = document.getElementById("name").value;
  let dt = document.getElementById("date").value;
  let pri = document.getElementById("price").value;
  let ticketCount = document.getElementById("ticketCount").value;
  let id = document.getElementById("id").value;

  cont.innerHTML +=
    '<div class="well">' +
    "project name:" +
    nam +
    "<br></br>" +
    dt +
    pri +
    "</div>" +
    "<br></br>";

  await createEvent(nam, dt, pri, ticketCount, id);
});
1 Like

so insted of this line
document.getElementById('btn').onclick=createEvent;

we use this line,

await createEvent(nam, dt, pri, ticketCount, id);
```right?

You can remove this line then document.getElementById("btn").onclick = createEvent;

thank u very much, now i will try to implement next functions.

hello, now that i have successfully created createEvent but its not persisting, its going away with refresh.
what should i do to make it permanent, moralis DB or external database?

Please keep this same issue in this thread you have made.