Question

我试图将一些简单的登录数据提交给服务器。所有请求和功能都适用于＆＃34; testuser。＆＃34;我希望人们能够提交他们的用户名和密码以供服务器考虑（它们都加密了，我无法看到它。）

我可以看到注册请求提交通用数据的位置＆＃34; testuser＆＃34;用户名和通行证。但我不知道如何让它接受用户登录信息。

                    <!--This is where I'm attempting a login form-->

<form action="/action_page.php">
  <div class="imgcontainer">
    <img src="img_avatar2.png" alt="Avatar" class="avatar">
  </div>

  <div class="container">
    <label><b>Username</b></label>
    <input type="text" placeholder="Enter Username" name="uname" required>

    <label><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" required>

    <button type="submit">Login</button>
    <input type="checkbox" checked="checked"> Remember me
  </div>

  <div class="container" style="background-color:#f1f1f1">
    <button type="button" class="cancelbtn">Cancel</button>
    <span class="psw">Forgot <a href="#">password?</a></span>
  </div>
</form>

<!-- This is rock-solid code from the gamesparks API.  Works flawlessly.  -->
    <button onClick='gamesparks.registrationRequest("testuser", "testuser", "testuser", registerResponse)'>Register</button>
    <button onClick='gamesparks.authenticationRequest("testuser", "testuser", loginResponse)'>Login</button>
    <button onClick='gamesparks.accountDetailsRequest(accountDetailsResponse)'>Account Details</button>
                    <button onClick='customEvent()'>Custom Event</button>
                    <button onClick='customEvent2()'>Custom Event 2</button>
                    <button onClick='testRT()'>Test RT</button>
                  <i>Special thanks to the awesome team at GameSparks!</i>
                  <div id="messages"></div>
                  <br/>
                  <br/>

我的所有按钮都工作，从我的后端吐出关于＆＃34; testuser的数据。＆＃34;我知道它有效，因为我可以改变我的数据并进行验证。

您会注意到＆＃34; testuser＆＃34;其中一个onClicks占用三个空格。一个是用户名，另一个是密码，第三个是displayname（按顺序）。

Displayname可以等于用户名...如果有人想要额外的信用。

但大多数情况下，我希望我的模态输入数据并将其提交给我的按钮。

Answer 1

您需要手动获取每个字段值。最直接的方法是通过document.getElementById和value：

document.getElementById( "username" ).value

在你的例子中：

<button onClick='gamesparks.authenticationRequest( document.getElementById( "username" ).value, document.getElementById( "password" ).value, loginResponse )'>Register</button>

但是，我会建议调用函数而不是内联函数：

<button onclick="login()">Login</button>
⋮
⋮ // Before </body>
⋮
<script>
const fetchValue = id => document.getElementById( id ).value;

function login() {

    const username = fetchValue( "username" );
    const password = fetchValue( "password" );

    gamesparks.authenticationRequest( username, password, loginResponse );

}
</script>

另外1：你永远不需要在面向客户的HTML / JavaScript中放置api秘密。

另外2：关于你的这些方面：

<var username = username>
<var password = password>

这些都是无效的。 <var>提供样式而不提供任何其他内容。看起来你正试图在那里放置JavaScript？为此，您需要使用<script>标记或event handlers，例如onclick。

Answer 2

再一次，我解决了自己的问题！我所做的是把我的gamesparks函数放在另一个函数中。我了解到这被称为“筑巢”。我还将变量定义为onClick的一部分，然后在函数中使用。我使用的解决方案如下。原谅我的n00bish评论。但是他们帮助我学习。

    <div class="container">
  <h2>Click To Login</h2>  <!-- This is a label above the button -->
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Martial Parks</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title"><img src="http://martialparks.com/wp-content/uploads/2017/10/cropped-mp_logo01-2.png" class="center-block img-circle logo-margin-negative"></h4>
        </div>
        <div class="modal-body">
          <form>
          <div class="row">
  <div class="form-group col-sm-5 col-sm-offset-4">
    <label class="sr-only" for="exampleInputAmount">Username</label>
    <div class="input-group">
      <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
        <input type="text" class="form-control" id="username" placeholder="Username">
    </div>




  </div>
  <div class="form-group col-sm-5 col-sm-offset-4">
    <label class="sr-only" for="exampleInputAmount">Password</label>
    <div class="input-group">
      <div class="input-group-addon"><i class="fa fa-key"></i></div>
        <input type="text" class="form-control" id="password" placeholder="Password">
    </div>
  </div>



            <button type="button" class="btn btn-danger btn-block" data-dismiss="modal" onClick="login()">Login</button>
            <!-- There is a line of code that closes the modal once the button is clicked: data-dismiss="modal"  I've removed it from the register button.  -->
            <!-- Also, I can call up multiple functions using this format:  onclick="doSomething();doSomethingElse();"  -->

            <button type="button" class="btn btn-danger btn-block" onClick="register()">Register</button>



<script>
    function login() {
      var usernameinput = document.getElementById('username').value;
      var passwordinput = document.getElementById('password').value;
      console.log(usernameinput);
      console.log(passwordinput);
      gamesparks.authenticationRequest( usernameinput, passwordinput, loginResponse);
    }

    function register() {
      var usernameinput = document.getElementById('username').value;
      var passwordinput = document.getElementById('password').value;
      console.log(usernameinput);
      console.log(passwordinput);
      gamesparks.registrationRequest( usernameinput, usernameinput, passwordinput, registerResponse)
    }
</script>



    </div>
</form>
        </div>
        <div class="modal-footer">
          <div class="row">
          <div class="col-sm-5 col-sm-offset-4">
                  <div id="messages"></div>
                  <br/>
                  <br/>

将表单提交给websocket

2 个答案: