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>

我试图提交而不是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();
  }
});

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

Ajax使用enter和onclick提交表单

3 个答案: