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

Question

项目是改一个人的名字，两个名字我有两种形式
我永远无法更改第二种形式的名称。
我被要求来这里而不是在以太坊部分发帖
当我运行 solidity 中的代码时，我可以更改名称，没问题。
当我运行它与甘纳许一起使用时，没有骰子，所以我认为这是一个 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 菜鸟。我不能在同一页面上有两个输入吗？
我看过很多有类似问题的论坛，但我尝试过的方法都没有用。
感谢您的帮助

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

我为每个 "form section" 设置了唯一的名称（唯一的 header、表单名称、id...），然后引用这些名称。我还按照@trixo 的建议使用# 来引用 id

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

two forms, two inputs...but only one output with Javascript + web3

javascript

forms

jquery

input

web3