<form action="" data-action="chat">
<input type="hidden" name="user" value="Вася">
<textarea name="message" cols="30" rows="10"></textarea>
<br>
<button type="submit">Отправить</button>
<div data-container="response"></div>
</form>document.addEventListener('keydown', function (e) {
if (e.ctrlKey && e.keyCode == 13 && e.target.name == 'message') {
e.preventDefault();
sendMessage(e.target.form);
}
});
document.addEventListener('submit', function (e) {
if (e.target.dataset && e.target.dataset.action == 'chat') {
e.preventDefault();
sendMessage(e.target);
}
});
function sendMessage (form) {
var sendData = [];
for (var i = 0; i < form.elements.length; i++) {
if (form.elements[i].name && form.elements[i].value) {
sendData.push(form.elements[i].name + '=' + encodeURIComponent(form.elements[i].value));
}
}
if (sendData.length && form.message.value) {
var request = new XMLHttpRequest();
request.addEventListener('readystatechange', function (data) {
if (this.readyState == 4 && this.status >= 200 && this.status < 400) {
if (!form.response) {
form.response = form.querySelector('[data-container="response"]');
}
form.message.value = '';
//form.response.innerHTML = data.responseText;
form.response.innerHTML = 'Отправлено<br>' + sendData.join('&');
}
});
request.open('POST', form.action);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
request.send(sendData.join('&'));
}
}
$("#myForm").on("submit", function (e) {
e.preventDefault();
var $this = $(this);
var data = $this.serialize();
$.ajax({
... send data
success: function () {
$this.find('textarea').prop('value', '');
}
})
});<script>
document.getElementById("submit").onclick = handleButtonPress;
var httpRequest;
function handleButtonPress(e) {
e.preventDefault();
var form = document.getElementById("fruitform");
var formData = "";
var inputElements = document.getElementsByTagName("textarea");
for (var i = 0; i < inputElements.length; i++) {
formData += inputElements[i].name + "="
+ inputElements[i].value + "&";}
document.getElementsByTagName("textarea")[0].value="";
httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = handleResponse;
httpRequest.open("POST", form.action);
httpRequest.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded');
httpRequest.send(formData);
}
function handleResponse() {
if (httpRequest.readyState == 4 && httpRequest.status == 200) {
document.getElementById("results").innerHTML
= httpRequest.responseText;
}
}
</script>
