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，但是沒有成功：/

編輯：已經解決了，我真傻。.謝謝您的幫助。 這是我的代碼，以防您遇到與我相同的麻煩：

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

Answer 2

如果它能onclick起作用，我認為<form>中的onsubmit也應該起作用：

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

您是否嘗試過這種方式？

Answer 3

那這種方法呢？ 確定是否已按回車鍵。 （Ascii 13）

$(document).ready(function(){
    $("form").keydown(function(event){ 
     if(event.which == 13) {
        event.preventdefault();
        // submit
     }
    });
});