Submit form to websocket - html

Question

I'm trying to submit some simple log in data to a server. All of the requests and functions are working great for "testuser." I want people to be able to submit their username and password for consideration to the server (it all gets encrypted, and I can't see it.)
I can see where the registration request submits generic data "testuser" for username and pass. But I have no idea how to get it to accept user login information instead.
<!--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 password?</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/>
All of my buttons work, spitting out data from my backend regarding "testuser." I know it works because I can alter my data and verify.
You'll notice "testuser" occupies three spaces for one of the onClicks. One is username, the other is password, and the third is displayname (in that order.)
Displayname can equal Username...if anyone wants extra credit.
But mostly, I want my modal to input the data and submit it for my buttons.

Answer 1

Again, I solved my own question! What I did was put my gamesparks function inside of another function. I learned this was called "nesting." I also defined variables as part of the onClick, which were then used in the function. The solution I used is below. Forgive my n00bish comments. But they help me learn.
<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">×</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/>

Answer 2

You need to manually grab each of your fields values. The most direct way is via document.getElementById and value:
document.getElementById( "username" ).value
In your example:
<button onClick='gamesparks.authenticationRequest( document.getElementById( "username" ).value, document.getElementById( "password" ).value, loginResponse )'>Register</button>
I would, however, suggest calling a function instead of inlining it:
<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>
Also1: You should never need to place an api secret in client-facing HTML/JavaScript.
Also2: Regarding your these lines:
<var username = username>
<var password = password>
These are invalid. <var> provides styling and nothing else. It looks like you are attempting to place JavaScript there? To do so, you need to either use <script> tags or event handlers, such as onclick.