Изменить текст кнопки отправки формы после нажатия и вернуть обратно после успешной отправки?

Question

[Александр Кравц]

Здравствуйте! Делаю отправку сообщений в чате на js. Уже всё реализовал кроме одного пункта.

Хочу сделать так, чтобы при нажатии кнопки она меняла название на "Отправка . . .", а после ответа сервера возвращалась в исходный вид ("Отправить").

В интернете много всего по этой теме, но для кода моего сайта решения так и не нашел. Помогите, пожалуйста, решить эту задачу)

Код формы HTML:

<form id="myForm">
<textarea id="msg" name="msg"></textarea><br />
<input type="submit" value="Отправить">
</form>

Код JS:

<script>
	function splash()
	{
			

		if (document.myForm.msg.value  =='')
			{
				alert ("Заполните текст сообщения!");
				return false;	
			}
		
		return true;   
	}

	// загрузка сообщений из БД в контейнер messages

    
function show_messages()
	{
		$.ajax({
			url: "show.php",
			cache: false,
			success: function(html){
				$("#messages").html(html);
			}
		});
	}
    $(document).ready(function(){  
            show_messages();  
            setInterval('show_messages()',1000);  
        });  


		
	$(document).ready(function(){

		show_messages();
		
		// контроль и отправка данных на сервер в фоновом режиме при нажатии на кнопку "отправить сообщение"
		$("#myForm").submit(function(){
		
			var msg  = $("#msg").val();
			if (msg =='')
			{
				alert ("Заполните текст сообщения!");
				return false;
			}
			$.ajax({
				type: "POST",
				url: "action.php",
				data: "msg="+msg+"&action=add",
				success: function(msg){
              jQuery('#myForm')[0].reset(); //очистка поля
					show_messages();
			   }
			});
			
			return false;
		});
		
	});
</script>

Answer 1

[Антон Шаманов]

data-* аттрибут с альтернативным текстом, что-то вроде этого

$('#content').on(
		'click', 
                'input.toggle-text'
		function (event) {
			event.preventDefault();
			var btn = $(this),
			       text = btn.val();
			btn.val(btn.data('toggleText'));
			btn.data('toggleText', text);
		}
	);

Comments

[Александр Кравц]

Я немного тугой в JS. Можете, пожалуйста, сказать куда мне его вставить?

[Антон Шаманов]

<input type="submit" value="Отправить" data-value="Отправка . . .">

$("#myForm").submit(function(event) {
    event.preventDefault();
    
    var msg = $("#msg").val();
    if (!msg) {
        return alert("Заполните текст сообщения!");
    }
    
    var $form = $(this),
        $submit = $(':submit', $form);
    $submit.val($submit.data('value'));
    $.ajax({
        url: "action.php",
        data: "msg=" + msg + "&action=add",
        success: function() {
            $form.trigger('reset');
            show_messages();
        }
    });
});

Reset формы сбросит значение кнопки на дефолтное т.ч. достаточно вначале загрузить новое значение из data-value