两个 forms，两个输入……但只有一个 output 和 Javascript + web3

Question

The project is to change someone's name, and I have two forms for two names.项目是改人名，我有两个forms换两个名字。
I can never change the name in the second form.我永远无法更改第二种形式的名称。
I was asked to come here instead of posting in the ethereum section我被要求来这里而不是在以太坊部分发帖
When I run the code in solidity, I can change the names, no problem.当我在solidity中运行代码时，我可以更改名称，没问题。
When I run it with ganache, no dice, so I assume it is a javascript problem.当我用 ganache 运行它时，没有骰子，所以我认为这是 javascript 问题。

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 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 #.我在哪里使用#来引用id。
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.我无法在提交时更新第二个表单，我不知道为什么，但仍然坚信这是由于底部附近的行需要将“testid”更改为其他内容。 I am also a javascript noob.我也是一个 javascript 菜鸟。 Can I not have two inputs on the same page?我不能在同一页面上有两个输入吗？
I have looked at a lot of forums with a similar issue, but what i have tried has not worked.我看过很多有类似问题的论坛，但我尝试过的没有奏效。
Thank you for any help感谢您的任何帮助

Answer 1

EDIT编辑

It works once I rewrote it as follows一旦我按如下方式重写它就可以工作

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

I made every name unique for each "form section" (unique header, form names, id...) and then referenced those.我使每个“表单部分”的每个名称都是唯一的（唯一的 header，表单名称，id ...），然后引用它们。 I also used # to reference id's as @trixo suggested我还使用 # 来引用 @trixo 建议的 id

两个 forms，两个输入……但只有一个 output 和 Javascript + web3

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-05-13 23:00:19

两个 forms，两个输入……但只有一个 output 和 Javascript + web3

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-05-13 23:00:19

解决方案1
0 已采纳 2020-05-13 23:00:19