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>
答
如果它工作的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>
你有没有试过这种方式?
答
您需要在该输入字段上添加事件侦听器。见http://api.jquery.com/keypress/和我下面的例子。
$("#message").keypress(function(event) {
if (event.which == 13) {
event.preventDefault();
send();
}
});
答
对这种做法有什么。 确定是否按回车键。 (Ascii 13)
$(document).ready(function(){
$("form").keydown(function(event){
if(event.which == 13) {
event.preventdefault();
// submit
}
});
});
只是钉了它,非常感谢你!我不得不添加返回false,但它工作得很好! – 2014-11-08 21:10:05
你是对的,你必须返回false,所以表单不会真的提交,但只在里面执行带有AJAX请求的* send()*方法。 – misko321 2014-11-08 21:20:40