两种形式，两种输入...但只有一个输出，使用 Javascript + web3答案

【问题标题】：two forms, two inputs...but only one output with Javascript + web3两种形式，两种输入...但只有一个输出，使用 Javascript + web3
【发布时间】：2020-05-13 15:04:25
【问题描述】：

项目是改名，两个名字我有两个表格。
我永远无法更改第二种形式的名称。
我被要求来这里而不是在以太坊部分发帖
当我在solidity中运行代码时，我可以更改名称，没问题。
当我用 ganache 运行它时，没有骰子，所以我认为这是一个 javascript 问题。

坚固

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>

我尝试过改变

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

到

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

更改输入类型，更改所有变量的名称，然后尝试一些方法
我在哪里使用#来引用id。
我无法在提交时更新第二个表单，我不知道为什么，但仍然坚信这是由于底部附近的行需要将“testid”更改为其他内容。我也是一个javascript菜鸟。我不能在同一页面上有两个输入吗？
我看过很多有类似问题的论坛，但我尝试过的没有奏效。
感谢您的帮助

【问题讨论】：

contract.setOtherCandidate($('#input').val());试试这个，# 是 id 和 . 的选择器。是类的选择器，$("[Selector]SelectorName")
感谢您的帮助，但没有骰子。我还为 id 尝试了contract.setOtherCandidate($('#testid').val()); （在表格 2 中称为“testid”），以及给第二种表格一个名为“otherinput”的类并尝试contract.setOtherCandidate($('.otherinput').val());
一旦我为每个“表单部分”（唯一的标题、表单名称、id ...）设置了唯一的每个名称，然后引用这些名称，它就起作用了。我还使用# 来引用 @trixo 建议的 id

标签： javascript jquery forms input web3

【解决方案1】：

编辑

一旦我将其重写如下，它就可以工作

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

我为每个“表单部分”（唯一的标题、表单名称、ID...）设置了唯一的名称，然后引用了这些名称。我还使用 # 来引用 @trixo 建议的 id

【讨论】：