Ajax提交表单并输入onclick

我的代码有问题。我一直在试图设计一个表单，可以更新数据库中的数据并在不刷新页面的情况下显示它。我可以这样做，但我希望如果用户按下Enter键，表单就可以工作。这里是我的代码：Ajax提交表单并输入onclick

<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>

来源

2014-11-08 Cro Max

如果它工作的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>

你有没有试过这种方式？

来源

2014-11-08 21:05:47 misko321

只是钉了它，非常感谢你！我不得不添加返回false，但它工作得很好！ – 2014-11-08 21:10:05

你是对的，你必须返回false，所以表单不会真的提交，但只在里面执行带有AJAX请求的* send（）*方法。 – misko321 2014-11-08 21:20:40

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

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

来源

2014-11-08 21:08:35

对这种做法有什么。确定是否按回车键。（Ascii 13）

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

来源

2014-11-08 21:10:13 fubbe

Ajax提交表单并输入onclick

回答

相关问题