javascript - Запретить загрузку страницы при отправке формы Jquery с помощью кнопки «Нет»




html ajax (2)

В том случае, если вам не нужна кнопка отправки, просто используйте метод отправки формы, как сначала вы предоставляете тегу form идентификатор (например, myForm)

<div id="bot">
  <form id="myForm">
    <input id="user-response" type="text" placeholder="" autocomplete="off" autofocus />
    <button id="user-submit" type="submit" style="display: none !important;">Send</button>
  </form>
</div>

а затем отправить форму использования

document.getElementById("myForm").submit();

и если вы хотите, чтобы это произошло, когда вы нажимаете ввод в текстовом поле, используйте его как

$('#user-response').on('keypress', function(event){
   if (event.which === 13 || event.keyCode === 13) {
      document.getElementById("myForm").submit();
   }
});

У меня есть своего рода чат-бот в стиле терминала MSDOS. Пользователь вводит свой ответ, а затем нажимает Enter. Я обнаружил, что, когда я помечаю кнопку "display: none;" это приводит к перезагрузке страницы в нескольких браузерах (мой браузер Windows Chrome не перезагружается. Не знаю почему). Как можно скрыть кнопку при правильной работе формы и кода? Я бы предпочел не использовать "position: absolute;" отправить его за пределы экрана.

HTML:

<div id="bot"><form>
<input id="user-response" type="text" placeholder="" autocomplete="off" autofocus />
<button id="user-submit" type="submit">Send</button>
</form></div>

JAVASCRIPT:

$('#bot').on('click', '#user-submit', function(e) {
e.preventDefault();
message = $('#user-response').val();
message = message.toLowerCase();
sendUserResponse();
getBotResponse(message);
});

Я пробовал различные типы возврата: false ;, event.preventDefault (); и т. Д., Но все работает нормально, пока я не применяю display: none; укладка на кнопку. Я также изменил его на input и type = "button" / type = "submit", но снова отображаю: нет; вызывает перезагрузку страницы при нажатии «enter». Я прочитал около 20 различных вопросов о перезагрузке страницы, по запросу Ajax и т. Д. Ни один из них, похоже, не решает эту проблему.

РЕДАКТИРОВАТЬ:

Воспользовались двумя из приведенных ниже советов для проверки нажатия клавиши «Ввод» для отправки формы, но они продолжают ту же схему сбоя. Форма перезагружает страницу, если ваша кнопка отправки имеет стиль отображения: нет; Приведенные ниже методы работают, когда кнопка отображается визуально. Будет проверять код на наличие возвращаемых значений, которые могут быть причиной отправки и перезагрузки. На данный момент: Страница с кнопкой Visible - отлично работает любым методом. Страница с отображением: кнопка отсутствует - вызывает перезагрузку при всех указанных методах.

Также хотелось бы отметить, что перезагрузка страницы отсутствует в Chrome 49.0.2623.87 для Windows 7, но присутствует во всех браузерах OS X и некоторых браузерах Windows.

РЕДАКТИРОВАТЬ 2

Ошибка: дисплей: нет; кнопки вызывают перезагрузку страницы. Видимо в браузерах OS X и некоторых Windows. Решение: переключитесь на полный Ajax-неформ и должен решить любые проблемы. Разместит рабочее решение Ajax, когда соединено. Правильный ответ ниже для того, чтобы предложить Ajax. Ошибка передана в Chrome Dev и может быть позже добавлена ​​в другие браузеры.


Я думаю, что вы ищете AJAX. AJAX позволяет отправлять данные формы во внутренний PHP-файл (который затем может вставлять данные в БД и / или получать данные из БД) без перезагрузки страницы.

Страница перезагружается, потому что вы используете <form> . Когда кнопка отправки нажата, она отправляет форму, которая всегда обновляет страницу. Однако, если вы используете AJAX, вы можете отправлять данные (по желанию получать ответ) и продолжать работу в обычном режиме.

На самом деле, когда вы используете AJAX, вам даже не нужно использовать структуру <form> - простые DIVs работают просто отлично. Тогда вам не нужно использовать event.preventDefault() для подавления обновления встроенной формы.

Проверьте этот пост и особенно его примеры. Скопируйте их в свою систему и посмотрите, как они работают. Это довольно просто.

Также измените тип кнопки «Отправить» с type="submit" на type="button"

Чтобы определить, когда пользователь нажимает клавишу ВВОД в поле ввода, а затем нажимает кнопку отправки, попробуйте следующее:

$(function(){
    $('#user-response').keyup(function(){
        var keycode = (e.keyCode ? e.keyCode : e.which);
        if(keycode == '27'){ $('form').fadeOut();}
        if(keycode == '13'){ 
            $('#user_submit').click();
        }
    });
});






reload