кнопка onclick ничего не делает; javascript функция не вызывается

Question

Я пытаюсь создать страницу входа в систему с базой данных, но моя кнопка не выполняет никаких действий при нажатии, даже если она приведет меня к следующей странице (index2. html). Ничего не отображается даже в консоли, поэтому я не знаю, что с ней не так.

Javascript код

var response ="";
  function plogin(){
  var credentials = new Object();

  credentials.username= document.getElementById("user").value;
  credentials.password = document.getElementById("password").value;

  var request = new XMLHttpRequest();

  request.open("POST","/userlogin", true);
  request.setRequestHeader("Content-Type","application/json");
  request.onload=function(){

  response = JSON.parse(request.responseText);
  document.getElementById("loginform").style.display="none";
  if (response.message =="1"){
     window.location = "index2.html?username=" + credentials.username;}
  else{
     document.getElementById("msg").textContent = response.message;}

Форма входа

<form id = "loginform" onclick="plogin()"> 
        <label style="color: white;">Username:</label>
        <input type="text" style="border-style: solid; border-width:5px; border-color: slategrey;" placeholder="Jon" id="user" name="username">
        <br>
        <label style="color: white;">Password:</label>
        <input type="password" style="border-style: solid; border-width:5px; border-color: slategrey;" id="password" name="password">
        <br>
        <br>
        <input type="button"  class = "btn btn-secondary" value="Login">
      </form>

оба кода в той же html страница

код userlogin (js) работает в Почтальон

userlogin(request, respond){
        var username = request.body.username;
        var password = request.body.password;
        var msg="";

        var sql = "SELECT user.password FROM restaurant_review.user WHERE username = ?";

        db.query(sql, [username], function(error,result){
            if(error){
                throw error;
            }
            else{
                if(result.length > 0){
                    if(password == result[0].password){
                        msg ="1";
                        console.log(msg);
                    }
                    else{
                        msg = "FAIL";
                        console.log(msg);
                    }
                }
                else{
                    msg = "USER NOT FOUND";
                    console.log(msg);
                }
                respond.json(prepareMessage(msg));
            }
        });
   ```we

Answer 1

Ничего не срабатывает, потому что вы не отправляете свою форму. У вас есть несколько вариантов. Если вы используете кнопку отправки с типом ввода, равным «отправить», ваша форма будет отправлена. Если вы хотите продолжить использовать тип ввода «кнопка», вы можете использовать метод «onclick» для запуска вашей функции:

<input type="button" class="btn btn-secondary" value="Submit">

В JavaScript вы можете добавить прослушиватель событий для кнопки, которая ждет события клика. Я буду использовать jQuery в этом базовом c примере:

$('.btn').on('click', function() {
    //Enter the request to the server within your callback function.
});

В вашем прослушивателе событий для события щелчка второй передаваемый ему аргумент - это нечто, называемое «функцией обратного вызова». Вы можете реализовать код для вашего запроса в функции обратного вызова. Если вы хотите использовать чистый JavaScript, он хотел бы что-то вроде этого:

var btn = Document.getElementByClassName('btn');
btn.onclick = function() { /*your programming logic*/ };

Answer 2

Попробуйте изменить HTML <button type="submit">...</button> вместо <input type="button" class = "btn btn-secondary" value="Login">