javascript - Ajax 使用 Enter 和 onclick 提交表单

Question

我的代码有问题。我一直在尝试设计一种可以更新数据库中的数据并在不刷新页面的情况下显示数据的表单。我可以做到这一点，但我希望如果用户按下 Enter 键，表单就能工作。这是我的代码:

    <form name="chat" id="chat">
        <textarea name="message" type="text" id="message" size="63" ></textarea>
        <input type="button" value="Send" onClick="send();"/>
    </form>
<script>
//This function will display the messages
function showmessages(){
   //Send an XMLHttpRequest to the 'show-message.php' file
   if(window.XMLHttpRequest){
      xmlhttp = new XMLHttpRequest();
      xmlhttp.open("GET","chat.php?jogo=<?php echo $numerojogo;?>",false);
      xmlhttp.send(null);
   }
   else{
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      xmlhttp.open("GET","chat.php",false);
      xmlhttp.send();
   }
   //Replace the content of the messages with the response from the 'show-messages.php' file
   document.getElementById('chatbox').innerHTML = xmlhttp.responseText;
   //Repeat the function each 30 seconds
   setTimeout('showmessages()',30000);
}
//Start the showmessages() function
showmessages();
//This function will submit the message
function send(){
   //Send an XMLHttpRequest to the 'send.php' file with all the required informations~
   var sendto = 'adicionar.php?message=' + document.getElementById('message').value + '&jogador=<?php echo $user;?>' + '&jogo=<?php echo $numerojogo;?>';
   if(window.XMLHttpRequest){
      xmlhttp = new XMLHttpRequest();
      xmlhttp.open("GET",sendto,false);
      xmlhttp.send(null);
      document.getElementById("chat").reset();
   }
   else{
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      xmlhttp.open("GET",sendto,false);
      xmlhttp.send();
   }
   var error = '';
   //If an error occurs the 'send.php' file send`s the number of the error and based on that number a message is displayed
   switch(parseInt(xmlhttp.responseText)){
   case 1:
      error = 'The database is down!';
      break;
   case 2:
      error = 'The database is down!';
      break;
   case 3:
      error = 'Don`t forget the message!';
      break;
   case 4:
      error = 'The message is too long!';
      break;
   case 5:
      error = 'Don`t forget the name!';
      break;
   case 6:
      error = 'The name is too long!';
      break;
   case 7:
      error = 'This name is already used by somebody else!';
      break;
   case 8:
      error = 'The database is down!';
   }
   if(error == ''){
      $('input[type=text]').attr('value', '');
      showmessages();
   }
   else{
      document.getElementById('error').innerHTML = error;
   }
}
</script>

我尝试使用 onsubmit 而不是 onclick 但没有成功:/

编辑:已经解决了我太笨了..谢谢你的帮助misko!这是我的代码，以防您遇到与我相同的问题:

<form name="chat" id="chat" onsubmit="send();return false;">
    <input name="message" type="text" id="message" size="63" ></input>
    <input type="button" value="Send" onClick="send();"/>
</form>

Answer 1

<小时/>

您需要在该输入字段上添加一个事件监听器。请参阅http://api.jquery.com/keypress/和我下面的例子。

$( "#message" ).keypress(function( event ) {
  if ( event.which == 13 ) {
     event.preventDefault();
     send();
  }
});