Smart Contract is not calling through a website

Question

I have a website which puts inputs into an object and then places it on the ethereum blockchain. However, even after I created the contract, it is not calling? Does anybody know why? I use web3, infura, metamask, and remix. whenever I call remixContract.methods.setMessage(), the function appears in my console, but i do not get a confirmation request from metamask

// Connect a the web3 provider
if (typeof web3 !== 'undefined') {
    web3 = new Web3(web3.currentProvider);
} else {
    web3 = new Web3(new Web3.providers.HttpProvider("INFURA-LINK"));
}

// Set a default account
web3.eth.defaultAccount = 'MY-ACOUNT';

// Get the contract address
var RemixContract = new web3.eth.Contract([
    {
        "constant": false,
        "inputs": [
            {
                "name": "x",
                "type": "string"
            }
        ],
        "name": "setMessage",
        "outputs": [],
        "payable": false,
        "stateMutability": "nonpayable",
        "type": "function"
    },
    {
        "constant": true,
        "inputs": [],
        "name": "getMessage",
        "outputs": [
            {
                "name": "",
                "type": "string"
            }
        ],
        "payable": false,
        "stateMutability": "view",
        "type": "function"
    }
]);

// Get the contract abi
RemixContract.options.address = 'CONTRACT-ADDRESS';

console.log(RemixContract);


//data object

class Data{
    constructor(name, school, subject, teacher){
        this.name = name
        this.school = school
        this.subject = subject
        this.teacher = teacher
    }
}

$("#submit").click(function() {
    let hashable = new Data($('#name').val(), $('#email').val(), $('#age').val(), $('#tel').val())
    let certificateData = JSON.stringify(hashable)
    RemixContract.methods.setMessage(certificateData)
    console.log(certificateData);
});

            #header{
                background-color: darkblue;
                width: 100%;
                height: 100px;
                vertical-align: middle;
                color: white;
            }
            body{
                margin: 0px;
                font-family: Arial, Helvetica, sans-serif;
            }
            #navbar{
                margin: 0px;
                list-style: none;
            }
            .navbut{
                background-color: white;
                color: darkblue;;
                float: right;
                padding: 10px;
                margin: 30px;
                border-radius: 10px;
                text-decoration: none;
            }
            #homebutton{
                width: 50px;
                height: 50px;
                float: left;
                margin: 20px;
            }
            h1{
              margin: 20px;
              margin-top: 30px;
              float: left;
            }
            #box{
                border: 1px solid black;
                width: 80%;
                margin-left: 10%;
                margin-top: 5%;
                background-color: darkblue;
                color: white;
                border-radius: 10px;
            }
            #submit{
                padding: 10px;
                margin-top: 50px;
            }
            span{
                color: red;
            }
            #margin{
                margin: 10px;
            }

<!DOCTYPE html>
<html>
    <head>
        <title>Certificates Online</title>
        <meta charset="UTF-8">
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
    </head>
    <body>
        <div id='box'>
            <div id="margin">
                <label for="name">Full Name: </label>
                <input type="text" name="name" id="name" required></input>
                <br><br>
                <label for="email">Email: </label>
                <input type="text" name="email" id="email" required></input>
                <br><br>
                <label for="age">Age: </label>
                <input type="text" name="age" id="age" required></input>
                <br><br>
                <label for="tel">Telephone: </label>
                <input type="text" name="tel" id="tel" required></input>
                <br><br>
                <button id="submit">Submit</button>
            </div>
        </div>
    </body>
    <script src="dataHandling.js"></script>
</html>

MentatX MentatX · Accepted Answer · 2020-09-08T09:46:47

Notice that new API is available:

// Legacy dapp browsers...
if (window.web3 !== undefined) {
    const provider = new Web3.providers.HttpProvider(window.web3.currentProvider);
    const web3 = new Web3(provider);
}

// Modern dapp browsers...
if (window.ethereum !== undefined) {
  const provider = new Web3.providers.HttpProvider(window.ethereum);
  const web3 = new Web3(provider);
}

More details:

Smart Contract is not calling through a website

1 Answers