Можно ли очищать textarea из тела AJAX(для PHP)?

Question

[lexaxaxa]

Можно ли очищать textarea из тела AJAX? Решил попробовать усовершенствовать переписку, убрав перегрузку страницы.
Перегрузка страницы исчезла, но value textarea очищается только при первом AJAX, который инициируется нажатием кнопки сабмит. В последующие разы поле нужно очищать самому. В чем причина?Интересует пока только AJAX для PHP.

Comments

[Евгений Петров]

AJAX для кого?) Смешно...

[lexaxaxa]

AJAX отправляющий данные php коду..что смешного?просто есть еще node.js

[Евгений Петров]

lexaxaxa: Просто нет никакой привязки XMLHttpRequest к серверному языку. Потому и смешно.

[lexaxaxa]

а я что говорил что есть привязка к php? я написал то что написал) читайте внимательнее. по-моему должно быть ясно что имеется ввиду что принимающая стороной должен быть php код) поэтому я употребил предлог "для")

[Евгений Петров]

lexaxaxa: А какая разница, кто принимает? Хоть чёрт лысый.

Answer 1

[Евгений Петров]

Вот так примерно стоит реализовывать чат на XMLHttpRequest

HTML

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

JS

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('&'));
	}
}

Comments

[lexaxaxa]

спасибо за код без кверри! разберем

Answer 2

[Денис Инешин]

Покажите код, вы явно что-то не так делаете.

Обычно это так работает:

$("#myForm").on("submit", function (e) {
    e.preventDefault();
    var $this = $(this);
    var data = $this.serialize();

    $.ajax({
        ... send data
        success: function () {
            $this.find('textarea').prop('value', '');
        }
    })
});

Вот пример, очищается каждый раз: jsfiddle.net/IonDen/gvchpvfs

Comments

[Евгений Петров]

Плохое решение. Запрос провалился (провайдер на полминуты отвалился) и всё написанное коту под хвост.

[lexaxaxa]

какая альтернатива?

[Евгений Петров]

lexaxaxa: Альтернатива — подумать и очищать только после получения положительного ответа.

[lexaxaxa]

без кверри есть решение?...пока ее не изучаю

[Денис Инешин]

Евгений Петров: подправил

[lexaxaxa]

мне без кверри нужен код. как здесь внизу. вопрос простой...почему последняя строчка не работает. а вставленная в тело handleButtonPress очищает лишь один раз?

[lexaxaxa]

переделал...щас пресловутая строчка посередине.

Answer 3

[lexaxaxa]

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

Comments

[lexaxaxa]

последняя строчка

[Евгений Петров]

А encodeURIComponent() за вас дядя Вася вызовет? Получите на сервере абракадабру, коли писать на русском.

[lexaxaxa]

ну так а если не на русском...очищаться каждый раз должно?

[lexaxaxa]

с этим пока не знаком)encodeURIComponent()

[Евгений Петров]

Обрабатываете вместо отправки формы клик на кнопке... О, времена, о, нравы...

[lexaxaxa]

o temporas o mores!

[lexaxaxa]

то есть oh!

[lexaxaxa]

ну вобще-то пример рабочий...просто он для node.js///это асинхронная отправка формы как заявляет автор

[lexaxaxa]

One of the most common uses of Ajax is to send data to the server. Most typically, clients send form
data—the values entered into input elements contained by a form element. Listing 33-1 shows a simple
form, which will be the basis for this part of the chapter. I saved this HTML into a file named
example.html.

[lexaxaxa]

In this chapter, I will continue describing how Ajax works, showing you how to send data to the client.
Sending forms and files are two common uses for Ajax, which allow web applications to create a richer
experience for the user. I’ll also show you how to monitor progress as you send data to the server and
how to deal with different response formats sent back by the server in response to an Ajax request. Table
33-1 provides the summary for this chapter. The first three listings set up the server and HTML
document used in the other examples.

[lexaxaxa]

может он и ошибается. ведь Errare humanum est)

[Stalker_RED]

lexaxaxa: Она асинхронная потому, что буковки "AJAX" это Asynchronous Javascript and XML. Asynchronous, Карл!

И не важно, что там на стороне сервера node.js, php или c++ например.

[lexaxaxa]

а я что говорил что важно? вы мне это зачем пишите?)я это знаю