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) {

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) {

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...


Thanks, Kevin

  • did you change function name from handleAdopt to createWarrior? It would be great if you can provide the repository of your project. Feb 19 '19 at 19:58
  • Yeah, I did. It looks like that piece just passes the info of the button that was clicked though, doesn't it? The default pet shop adopt function is just looking for the petID. My function is looking for a number of variables but I'm not sure how to mod that bindEvents piece to do that. Feb 19 '19 at 20:04
  • Setting up a repo with the files in it now. That's how green I am, had never done that before... Feb 19 '19 at 22:38
  • Here's the repo, it's the src/js/app.js file I'm having trouble with: github.com/KevinMXRT/TribesOfWar Feb 19 '19 at 22:40

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>

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) => {

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


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.