Truffle Pet Shop Tutorial App.js - Send Multiple Form Values to Function

Question

Working through a little project using the Truffle Pet Shop as the starting point and hit a wall. It looks like this is the piece in App.js that fires the handleAdopt function:

bindEvents: function() {
$(document).on('click', '.btn-adopt', App.handleAdopt);
},

My question is how would I modify this to send multiple values from my form to a function?

I have this createWarrior function set up in the App.js file:

createWarrior: function(event) {
var WarriorFactoryInstance;

web3.eth.getAccounts(function(error, accounts) {
if (error) {
console.log(error);
}

var account = accounts[0];

App.contracts.WarriorFactory.deployed().then(function(instance) {
WarriorFactoryInstance = instance;

// Execute adopt as a transaction by sending account
return WarriorFactoryInstance.createWarrior(warName, level, attack, defend, 
strategy, winCount, lossCount, tokenURI, to);
}).catch(function(err) {
console.log(err.message);
});
});
}

I have a form in my html file that has an input element for each of the variables that the function needs so I'm assuming that I need to set up that bindEvents piece to get those values and pass them to the function?

Any help/advice would be greatly appreciated. I'm a major novice so feel free to explain anything like you're talking to a 5 year old...

https://github.com/KevinMXRT/TribesOfWar

Thanks, Kevin

Answer 1

You don't need any bindEvents for this to work. Set up your form like below.

<form onSubmit="App.createWarrior(); return false;">
    ...
    <button type="submit">Create</button>
<form/>

Here createWarrior function will automatically be called upon clicking Create button. createWarrior function might look similar as below.

createWarrior: () => {
    var name = $('#name').val();
    var level = $('#level').val();
    var attack = $('#attack').val();
    var defend = $('#defend').val();
    var strategy = $('#strategy').val();
    var winCount = $('#winCount').val();
    var lossCount = $('#lossCount').val();

    App.contracts.TribesOfWar.deployed().then((instance) => {
        return instance.createWarrior(name, level, attack, defend, strategy, winCount, lossCount, { from: App.accounts[0] });
    }).then((result) => {
        // Do something with result
    }).catch((err) => {
        console.error(err);
    });
}

Note: I'm populating App.accounts variable in my App.initContract function.