javascript - Evitar la carga de la página en el formulario Jquery Enviar con el botón de visualización Ninguno

html ajax

Question

Tengo una especie de chatbot en el estilo de terminal MSDOS. El usuario escribe su respuesta y luego pulsa enter. Descubrí que cuando etiqueto el botón con "display: none;" hace que la página se vuelva a cargar en varios navegadores (mi navegador Windows Chrome no se recarga. No estoy seguro de por qué). ¿Cómo puedo ocultar el botón pero el formulario y el código funcionan correctamente? Prefiero no usar "position: absolute;" para enviarlo fuera de la pantalla.

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);
});

He intentado varios tipos de retorno: falso ;, event.preventDefault () ;, y todo, pero todo funciona bien siempre que no aplique display: none; estilo al botón. También lo cambié a input y type = "button" / type = "submit" pero nuevamente se muestra: none; hace que la página se vuelva a cargar al presionar ''enter''. He leído sobre 20 preguntas diferentes sobre la recarga de la página, haga clic en la consulta ajax, etc., ninguna de ellas parece abordar este problema.

EDITAR:

Utilicé dos de las sugerencias a continuación para verificar si presionamos la tecla "Enter" para enviar el formulario, pero continúan con el mismo patrón de falla. El formulario vuelve a cargar la página si el botón de enviar tiene el estilo de mostrar: ninguno; Los siguientes métodos funcionan cuando el botón se muestra visiblemente. Verificará el código para ver los valores de retorno que pueden estar causando el envío y la recarga. Actualmente: Página con botón visible: funciona bien con cualquier método. Página con pantalla: botón ninguno: provoca la recarga en todos los métodos dados.

También me gustaría mencionar que la recarga de la página no está presente en Chrome 49.0.2623.87 para Windows 7, pero está presente en todos los navegadores OS X y algunos navegadores de Windows.

EDITAR 2

Error: pantalla: ninguno; Los botones causan la recarga de la página. Aparente en los navegadores OS X y algunos Windows. Solución: cambie a formularios no completos de Ajax y debería resolver cualquier problema. Publicará la solución de Ajax en funcionamiento cuando se junten La respuesta correcta a continuación es para sugerir Ajax. Error enviado a Chrome Dev y puede ser debitado a otros navegadores más adelante.

Answer 1

Creo que estás buscando AJAX. AJAX le permite enviar los datos del formulario a un archivo PHP de fondo (que luego puede insertar datos en una base de datos y / u obtener datos de la base de datos) sin volver a cargar la página.

La página se está volviendo a cargar porque está utilizando un <form> . Cuando se presiona el botón Enviar, envía el formulario, que siempre actualiza la página. Sin embargo, si usa AJAX, puede enviar los datos (opcionalmente, recibir una respuesta) y continuar de manera normal.

De hecho, cuando usa AJAX, ni siquiera necesita usar una estructura <form> : los DIV simples funcionan bien. Entonces no necesita usar event.preventDefault() para suprimir la actualización del formulario incorporado.

Mira esta publicación y especialmente sus ejemplos. Cópielos en su propio sistema y vea cómo funcionan. Es muy simple

Además, cambie el tipo del botón Enviar de type="submit" a type="button"

Para detectar cuándo un usuario presiona ENTRAR en el campo de entrada y luego haga clic en el botón Enviar, intente esto:

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

Answer 2

En tal caso, cuando no necesite tener el botón de envío, simplemente use el método de envío del formulario, como primero proporcione su etiqueta de form una identificación (por ejemplo, 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>

y luego para enviar el formulario use

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

y si quieres que esto suceda cuando presionas enter en el cuadro de texto, úsalo como

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