Calling a "view" function using web3js

Question

--- HEAVILY EDITED ---

Solidity contract:

pragma solidity ^0.4.24;


contract PatientRecords {

struct Patient {
    string ID;
    string weight;
    string height;
    string diseasehistory;
    string vaccinecard;
    string name;
    address registrantAddress;
}

uint ID;

constructor() public {
    ID = 0;

}


Patient[] public patients;
mapping(string => uint) names;

function register(string _id, string _weight, string _height, string _diseasehistory, string _vaccinecard, string _name) public returns (bool, uint){
    for (uint i = 0; i < patients.length; i++) {
         require (stringsEqual(patients[i].ID, _id) == false); 
    }
  names[_name] = ID;
  ID++;
   patients.push(Patient(_id, _weight, _height, _diseasehistory, _vaccinecard, _name,  msg.sender));
   return (true, ID);
}

function verifyByName(string _name) public view returns(string, string, string, string, string, string) {
   uint n;
   n = names[_name];
   return (
        patients[n].name,
        patients[n].ID,
        patients[n].weight,
        patients[n].height,
        patients[n].diseasehistory,
        patients[n].vaccinecard);
}

function stringsEqual(string storage _a, string memory _b) internal pure returns(bool) {
    bytes storage a = bytes(_a);
    bytes memory b = bytes(_b);
    if (keccak256(a) != keccak256(b)) {
        return false;
    }
    return true;
}

}

HTML input bar & button code:

<input id="name" type="text">
<button id="button2">Search</button>

What I need:

1. The user inputs a value on the HTML
2. User clicks a button
3. Value is passed as a parameter onto a "view" function on the contract
4. HTML displays whatever the contract returns

So, with the code above, how can I achieve those 4 points?

Thank you.

Answer 1

If you understood the tutorial and follow all instruction it is good. They use MetaMask, it means they use web3js 0.x version.

var web3 = window.web3;
if (typeof web3 !== 'undefined') {
  // Use Mist/MetaMask's provider.
  web3 = new Web3(web3.currentProvider)
} else {
  // Fallback to localhost if no web3 injection. We've configured this to
  // use the development console's port by default.
  web3 = new Web3(new Web3.providers.HttpProvider('http://127.0.0.1:9545'));
}

const patientrecordsContract = web3.eth.contract(<ABI>);
const instance = patientrecordsContract.at('0xdbdc2f9850e93fbdd894a5916010605f463b66d1')
instance.verifyByName("q", (error, data) => {
  console.log(error, data);
});