введите ключ и нажмите вместе

Question

У меня есть форма для входа.Форма получает номер мобильного телефона и отправляет его с ajax для проверки кода.мой код работает правильно, но многие пользователи после написания номера мобильного телефона нажимают клавишу ввода, а не нажимают кнопку.Событие, которое я пишу, - это не нажатие клавиш или нажатие клавишкак я могу связать эти события.

HTML:

  <form class="modal-content animate" id="tel_form">

  <h6>insert your mobile number </h6>




  <label>mobile number : </label>
  <input type="text" id="tel_input"  required>

  <button type="button" id="tel_button">send</button>
</form>

javascript:

var tel = document.getElementById('tel_button');

tel.onclick = function(){
var tel_number = document.getElementById('tel_input').value;

    var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
            if(xhr.response == 1){
alert('done');

}else{
 alert('wrong')
  }
}
} 

xhr.open('post' , "<?php echo base_url('login/auth/');?>" , true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send("tel_number= " + tel_number);
}

, когда пользователь нажимает кнопку отправки, все правильно, но когдапользователь нажимает клавишу ввода, страница перезагружается, и я не хочу перезагружаться. Я хочу получить тот же результат

Answer 1

Вы должны изменить тип кнопки с button на submit, или вы можете написать свой keyup прослушиватель событий, а затем запустить код, когда нажата клавиша ввода, и вы также добавите атрибут onsubmit="myScript" в свой тег формы.

Answer 2

Вместо события «onClick» вы можете использовать событие «onsubmit», а также изменить тип вашей кнопки с «button» на «submit», как показано ниже:

var formSubmitted = function() {
  event.preventDefault();
  var tel_number = document.getElementById('tel_input').value;
  console.log(tel_number);
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
      if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
        if (xhr.response == 1) {
          alert('done');

        } else {
          alert('wrong')
        }
      }
    }

    xhr.open('post', "<?php echo base_url('login/auth/');?>", true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send("tel_number= " + tel_number);
  }
}

<form onsubmit="formSubmitted()" class="modal-content animate" id="tel_form">

  <h6>insert your mobile number </h6>




  <label>mobile number : </label>
  <input type="text" id="tel_input"  required>

  <button type="submit" id="tel_button">send</button>
</form>

Answer 3

Вы можете представить прослушиватель событий Keyup для вашего входного тега.

var input = document.getElementById("tel_input");
input.addEventListener("keyup", function(event) {
    event.preventDefault();
    // Number 13 is the "Enter" key on the keyboard
    if (event.keyCode === 13) {
          // Trigger the button element with a click
          document.getElementById("tel_button").click();
   }
});