JSFiddle - React, Tailwind, and code Playground

by kpripper

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>replit</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <form class="form" action="register.jsp" method="post">
        <ul class="fieldlist">
            <li>
                <label for="simple-input"> UserName</label>
                <input id="simple-input1" name="userid" type="text" class="k-textbox" style="width: 100%;">
            </li>
            <li>
                <label for="simple-input">Password</label>
                <input id="simple-input2" name="pwd" type="password" class="k-textbox" style="width: 100%;">
            </li>
            <li>
                <input id="button" type="submit">
            </li>
        </ul>
    </form>






    <script src="script.js"></script>
</body>





</html>

JavaScript

document.querySelector('form.form').addEventListener('submit', function(e) {
  e.preventDefault();
  let x = document.querySelector('form.form').elements;
  console.log("Username: ", x['userid'].value);
  console.log("Password: ", x['pwd'].value);
});