Simple jquey chat with html database - How to send form by pressing enter key

Asked

Viewed 1,044 times

1

Well I am trying to minimize to the maximum as this very small I will post my entire code, I came across a problem the code is working perfectly, but only when I click the send button that works, I would like to know how to make it work by pressing the enter key or clicking.NOTE:I don’t know much about jquery

index.html

 <div id="chat"></div><br />
  <form action="#" method="post">
  <input type="hidden" id="nome" value="<?=$usuario?>" size="6">
  <input type="text" id="mensagem" width="80%" >
  <button type="button" id="enviar" title="enviar" >Enter</button>
  </form>

chat php.

<?php
$nome = $_POST['nome'];
$mensagem = $_POST['mensagem'];
$linha = $nome.' - '.$mensagem.'<br>';
$arquivo = file('chatlog.htm');
array_unshift($arquivo, $linha);
file_put_contents('chatlog.htm', $arquivo);
?>

script

  $(function() {
conversar();
$('#enviar').click(function() {
    var nome = $('#nome').val();
    var mensagem = $('#mensagem').val();
    $.post('chat.php', {'nome':nome, 'mensagem': mensagem }, function() {
      conversar;
    $('#mensagem').val('');
    });
});

function conversar() {
  $('#chat').load('chatlog.htm');
  $('#mensagem').focus();
}
setInterval(conversar, 3000);
});

css

 #chat {
    width: 300px;
    height: 400px;
    border: black 1px solid;
    background-color: #000000;
    overflow-x: hidden;
    overflow-y: scroll; 
    padding: 5px;
    margin-left: 10px;
   }
   fieldset {
    width: 330px;
    background-color: #e6e2af;
    border: black 1px solid;
   }

data is saved in a chatlog.htm filename

php jquery html

  • Instead of type button try type Submit, Chrome ran cool <button type="Submit" id="send" title="send" >Enter</button>``

2 answers

4

A good option is to create a Javascript function to respond to events of keypress in the input where the message is entered:

function enviarEnter(e){
    var tecla=(window.event)?event.keyCode:e.which;
    if (tecla == 13)
    {
        //coloca se o que precisa fazer, ex: função ajax;
    }
}

And in the input would look like this:

<input type="text" id="mensagem" onkeypress="enviaEnter(event)"/>

That way at each key pressed it will check if the primed key was a Enter and if so, it will perform the function.

  • I tried the following $(Document). ready(Function() { $(#message). bind('keypress', Function(e) { if(e.keycode==13){ $('#send').Trigger('click'); } }); }); but no result when enter contains updating the page instead of calling jquery

  • Which browser is using?

  • chorme and mozzarella

  • Already tried in internet explorer, if I’m not mistaken Keycode does not work in Mozilla, test to know.

  • same thing, when I give enter update the whole page. if you want to see in practice http://yugioh.site

  • Then do the following, for testing: in the function I passed to you, insert inside it the code that is inside the button click send, then in the event keypress of the input message you put sent);

  • boy, I’ve changed here the <button type="button" id="send" title="send" >Enter</button> to <input type="text" id="send" value="send" > and as amazing as it seems enter has started working now just don’t ask me why, I think it must have something to do with the button tag

  • Good,, check if it will run on all browsers...

  • Yes, but the mystery still continues

Show 4 more comments

0

About the type attribute of Buttons

  1. Submit: The button sends the form data to the server.
  2. button: The button has no default behavior. It may have client-side scripts associated with element events, in which they are triggered when the event occurs.

Use the type Ubmit that the enter key will work!

<button type="submit" id="enviar" title="enviar" >Enter</button>

Browser other questions tagged php jquery html

You are not signed in. Login or sign up in order to post.