I am facing an issue with a simple form for sending messages from one person to another using AJAX method POST to prevent page reload. The problem arises when the user hits [ENTER] in the field, causing the page to reload instead of the AJAX working as intended. I need a solution where pressing ENTER triggers the AJAX function smoothly.
Here is my code:
function sendMessage()
{
var sender = document.getElementById('sender').value;
var recipient = document.getElementById('recipient').value;
var message = document.getElementById("message").value;
if(message.length == 0 || message.length > 128)
{
return;
}
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById("messages").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("POST", "output.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("sender=" + sender + "&recipient=" + recipient + "&message=" + message);
}
-HTML:
<form action="" >
<input type="hidden" id="sender" name="sender" value="Erick">
<input type="hidden" id="recipient" name="recipient" value="Fernanda">
<input type="text" id="message" /> <input type="button" value="Send" onclick="sendMessage();">
</form>
<div id="messages"></div>