Solidity with Ropsten Test Network - Uncaught Error: invalid address

I was following some tutorials of d-apps and the link to the tutorial is here: https://www.youtube.com/watch?v=KkZ6iYnSDRw

I tried to connect my front end script with metamask, using the Ropsten network.

What have I done wrong?

When the page was loading, the variable that is meant to be displayed in the HTML file (there is nothing wrong with the HTML file), was displayed without issues. However, after I click a button to trigger the function which changes that variable's name, the error below appeared in the console:

Uncaught Error: invalid address

at v (web3.min.js:2)

at l (web3.min.js:2)

at web3.min.js:2 at Array.map ()

at i.formatInput (web3.min.js:2)

at i.toPayload (web3.min.js:2) at r.e [as sendTransaction] (web3.min.js:2)

at c.sendTransaction (web3.min.js:2)

at c.execute (web3.min.js:2)

at HTMLFormElement. ((index):125)

if (typeof web3 !== 'undefined') {
        web3 = new Web3(web3.currentProvider);
      } else {

        web3 = new Web3(new Web3.providers.HttpProvider (MY_INFURA_API));

      
      }
      console.log("web3 is:",web3)
      // Set Account
      web3.eth.defaultAccount = web3.eth.accounts[0];

      // Set Contract Abi
      var contractAbi = [
    {
        "constant": true,
        "inputs": [],
        "name": "candidateName",
        "outputs": [
            {
                "name": "",
                "type": "string"
            }
        ],
        "payable": false,
        "stateMutability": "view",
        "type": "function"
    },
    {
        "constant": false,
        "inputs": [
            {
                "name": "_name",
                "type": "string"
            }
        ],
        "name": "setCandidate",
        "outputs": [],
        "payable": false,
        "stateMutability": "nonpayable",
        "type": "function"
    },
    {
        "inputs": [],
        "payable": false,
        "stateMutability": "nonpayable",
        "type": "constructor"
    }
]
      
      
      
      
      
      // Add Your Contract ABI here!!!

      // Set Contract Address 
      // for ropston
      var contractAddress = // Add Your Contract address here!!!
      


      // Set the Contract
      var contract = web3.eth.contract(contractAbi).at(contractAddress);

      // Display Candidate Name
      contract.candidateName(function(err, candidateName) {
        $('#candidateName').html(candidateName);
      });

      // Change the Candidate Name
      $('form').on('submit', function(event) {
        event.preventDefault();
        console.log(contract)
        contract.setCandidate($('input').val());
    
      })

UPDATE: I realised I was quite careless, and after I placed the address inside the variable "web3.eth.defaultAccount", the invalid address issue seemed to be resolved. However, I get the error as shown below.

2nd UPDATE: Solved; I followed https://ethereum.stackexchange.com/questions/66345/how-to-use-sendtransaction-to-send-erc20-tokens-through-metamask/66368