0

The project is to change someone's name, and I have two forms for two names. When I run the code in solidity, I can change the names, no problem. When I run it with ganache, the name change in the second form never "takes".

solidity

pragma solidity ^0.4.2;

contract Election {
    string public candidateName;
    string public candidateotherName;



    function Election () public {
        candidateName = "Candidate 1";
        candidateotherName = "Candidate2";
    }

    function setCandidate (string _name) public {

       candidateName = _name;
    }


     function setOtherCandidate (string _othername) public {
     candidateotherName = _othername;

}
}

html

<!DOCTYPE html>
<html lang="en">
  <body>
          <div id="content">
            <h4 id="candidateName"></h4>

            <form id="form">

                <div class="input-group">
                  <input  name="candidateName">
                  </input>

                    <button type="submit" >Add Candidate</button>

                </div>
              </div>
            </form>


            <div id="othercontent">
              <h4 id="candidateotherName"></h4>

              <form id="form1" >

                  <div class="input-group">
                    <input name="candidateotherName"  id='testid'>
                    </input>
                      <button type="submit" >Add other Candidate</button>
                    </div>
                </div>
              </form>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/web3.min.js"></script>
    <script>

      if (typeof web3 !== 'undefined') {
        web3 = new Web3(web3.currentProvider);
      } else {
        web3 = new Web3(new Web3.providers.HttpProvider('http://localhost:7545'));
      }

          web3.eth.defaultAccount = web3.eth.accounts[0];


      var contractAbi = [I know i put in the ABI here, i'm just leaving it blank];


      var contractAddress = 'I know i have to put in the address here, I am leaving it blank';


      var contract = web3.eth.contract(contractAbi).at(contractAddress);


      contract.candidateName(function(err, candidateName) {
        $('#candidateName').html(candidateName);
      });


      contract.candidateotherName(function(err, candidateotherName) {
        $('#candidateotherName').html(candidateotherName);
      });


      $('form').on('submit', function(event) {
        event.preventDefault();
        contract.setCandidate($('input').val());
      })

      $('form1').on('submit', function(event) {
        event.preventDefault();
        contract.setOtherCandidate($('testid').val());
      })


    </script>
  </body>
</html>

I have tried changing

contract.setOtherCandidate($('testid').val());

to

contract.setOtherCandidate($('input').val());

and changing the input type,changing the names for all the variables, and trying something
where i reference the id's using #. I cannot get the second form to update on submission and I do not know why, but remain convinced it is due to the line near the bottom where "testid" needs to be changed to something else. Thank you for any help

no matter what i put, form 1 changes, but form 2 does not

2
  • This seems like a Javascript/HTML issue which has nothing to do with Ethereum. Commented May 13, 2020 at 13:27
  • thank you. I'll ask it in a more appropriate forum.
    – rubecuber
    Commented May 13, 2020 at 14:17

1 Answer 1

0

In case someone stumbles upon this, here is what i did to solve the issue. I made every name unique for each "form section" (unique header, form names, id...) and then referenced those. Some of the id's were not unique. I also used # to reference id's.

<!DOCTYPE html>
<html lang="en">
  <body>

            <h4 id="candidateName"></h4>

            <form id="form">


                  <input  id="nameone" name="candidate1Name">
                  </input>

                    <button type="submit" >Add Candidate</button>



            </form>

            <h5 id="othercandidateName"></h5>

            <form id="otherform">


                  <input  id="othernameone" name="othercandidate1Name">
                  </input>

                    <button type="submit" >Add Candidate</button>



            </form>



    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/web3.min.js"></script>
    <script>

      if (typeof web3 !== 'undefined') {
        web3 = new Web3(web3.currentProvider);
      } else {
        web3 = new Web3(new Web3.providers.HttpProvider('http://localhost:7545'));
      }

          web3.eth.defaultAccount = web3.eth.accounts[0];


      var contractAbi =[my way cool ABI]
;


      var contractAddress = 'my way cool address';


      var contract = web3.eth.contract(contractAbi).at(contractAddress);


      contract.candidateName(function(err, candidateName) {
        $('#candidateName').html(candidateName);
      });



      $('#form').on('submit', function(event) {
        event.preventDefault();
        contract.setCandidate($('#nameone').val());
      })

      contract.othercandidateName(function(err, othercandidateName) {
        $('#othercandidateName').html(othercandidateName);
      });


            $('#otherform').on('submit', function(event) {
              event.preventDefault();
              contract.othersetCandidate($('#othernameone').val());
            })

    </script>
  </body>
</html>

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