Submit Button не работает как следует

Question

Здравствуйте, я использую этот код. У меня проблема в этом. когда я вводим ввод в поле ввода, это нормально. но когда я нажимаю кнопку, страница обновляется в течение секунды, а поле ввода автоматически очищается.

<script> 
     function book_suggestion() { 
      var book = document.getElementById("book").value; 
      var xhr; 
      if (window.XMLHttpRequest) { 
       xhr = new XMLHttpRequest(); 
      } else if (window.ActiveXObject) { 
       xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
      } 
      var data = "book_name=" + book; 
      xhr.open("POST", "book-suggestion.php", true); 
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
      xhr.send(data); 
      xhr.onreadystatechange = display_data; 

      function display_data() { 
       if (xhr.readyState == 4) { 
        if (xhr.status == 200) { 
         document.getElementById("suggestion").innerHTML = xhr.responseText; 
        } else { 
         alert('There was a problem with the request.'); 
        } 
       } 
      } 
     } 
    </script> 

Answer 1

Причина ваша страница перезагрузка происходит потому, что <form> элементов поймать ввести пресс.

Поймать введите пресса представит форму.

Отправка формы без атрибута action="" будет отправлена ​​на ту же страницу.

Отправка на страницу, которая не обрабатывает запрос, просто перезагрузит страницу, и ваш ввод формы будет сброшен до пустого.

Чтобы исправить это, отключите submit-on-enter с помощью javascript, чтобы поймать нажатие клавиши, равное 13, и вернуть false или отменить событие.

---

<input type=text id=book onKeyUp="book_suggestion(event)"> 

... [snip] ... 

function book_suggestion(e){ 
    if(e.which == 13){ 
     e.preventDefault(); 
     e.stopPropagation(); 
     return false; 
    } 

    ... [snip your code] ... 

Это должно сделать трюк.

Для того, что стоит, люди в переполнении стека обычно не хотят изменять ваш код по вашему запросу. Это простое исправление, которое можно найти в Googling для ключевых слов («catch keypress», «cancel event» и т. Д.).

Answer 2

Если я вас понимаю, вы хотите представить свои данные формы. Вы должны вернуть false в пределах book_suggestion() функции. И добавить onsubmit в <form> элемент. Удостоверьтесь, что он должен иметь return. Например:

<form onsubmit="return book_suggestion();">