Ajax 使用 enter 和 onclick 提交表单答案

【问题标题】：Ajax submiting a form with enter and onclickAjax 使用 enter 和 onclick 提交表单
【发布时间】：2014-11-08 21:00:36
【问题描述】：

我的代码有问题。我一直在尝试设计一种可以更新数据库中的数据并在不刷新页面的情况下显示它的表单。我可以这样做，但我希望如果用户按下 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>

【问题讨论】：

标签： javascript jquery ajax onclick enter

【解决方案1】：

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

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

【讨论】：

【解决方案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>

你试过这样吗？

【讨论】：

刚刚搞定，非常感谢！我不得不添加 return false 但效果很好！
你是对的，你必须返回false，所以表单不会真正提交，而只是执行send()方法，里面有AJAX请求。

【解决方案3】：

这种方法怎么样。确定是否已按下回车。（ASCII 13）

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

【讨论】：