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

Question

[LezhnevM]

Реализовал отправку формы с сайта сразу в гугл таблицы и на почту, но из-за этого отправка формы стала занимать много времени и пользователи начали кликать по несколько раз, так как не понятно отправилось ли с первого раза.

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

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

Код формы html

spoiler

<form id="form_28256" novalidate success-msg="Спасибо! Скоро мы с вами свяжемся." fail-msg="Ошибка! Проверьте информацию и попробуйте еще раз.">
	
	<div class="form-group">
	<label>Имя<br></label>
	<input class="form-control" required placeholder="Имя" id="name" name="name" />
	</div>

	<div class="form-group">
	<label>E-mail<br></label>
	<input class="form-control" required placeholder="[e-mail]" id="email" name="email" />
	</div>

	<div class="form-group">
	<label>Телефон<br></label>
	<input class="form-control" placeholder="79175985781" id="phone" required name="phone" />
	</div>

	<input type="hidden" id="utm_source" name="utm_source" value="<?php echo $source; ?>" />
	
	<input type="hidden" id="utm_medium" name="utm_medium" value="<?php echo $medium; ?>" />
	
	<input type="hidden" id="utm_content" name="utm_content" value="<?php echo $content; ?>">
	
	<input type="hidden" id="utm_term" name="utm_term" value="<?php echo $term; ?>">
	
	<input type="hidden" id="utm_campaign" name="utm_campaign" value="<?php echo $campaign; ?>">

	<button class="btn btn-lg btn-rd pull-right bloc-button btn-light-salmon-pink" type="submit" id="click-button-forma-kak-vse-rabotaet" name="submit">Готово</button>

</form>

Код JS

spoiler

$(function()
{	
	$("input,textarea").jqBootstrapValidation(
    {
     	preventSubmit: true,
     	submitSuccess: function($form, event)
	 	{			
			if(!$form.attr('action')) // Check form doesnt have action attribute
			{
				event.preventDefault(); // prevent default submit behaviour
			
				var processorFile = getProcessorPath($form);
				var formData = {};

				$form.find("input, textarea, option:selected").each(function(e) // Loop over form objects build data object
				{		
					var fieldData =  $(this).val();
					var fieldID =  $(this).attr('id');
				
					if($(this).is(':checkbox')) // Handle Checkboxes
					{
						fieldData = $(this).is(":checked");
					}
					else if($(this).is(':radio')) // Handle Radios
					{
						fieldData = $(this).val()+' = '+$(this).is(":checked");
					}
					else if($(this).is('option:selected')) // Handle Option Selects
					{
						fieldID = $(this).parent().attr('id');
					}
					
					formData[fieldID] = fieldData;		
				});
	
				$.ajax({
		        	url: processorFile,
		    		type: "POST",
		    		data: formData,
		    		cache: false,
		    		success: function() // Success
		 			{  
						$form.append("<div id='form-alert'><div class='alert alert-success'><button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button><strong>"+$form.attr('success-msg')+"</strong></div></div>");
		 	   		},
			   		error: function() // Fail
			   		{
						$form.append("<div id='form-alert'><div class='alert alert-danger'><button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button><strong>"+$form.attr('fail-msg')+"</strong></div></div>");
			   		},
					complete: function() // Clear
					{
						$form.trigger("reset");
					},
		   		});
			}
         },
         filter: function() // Handle hidden form elements
		 {
			 return $(this).is(":visible");
         },
	 });
	 
	 // Get Path to processor PHP file
	 function getProcessorPath(form)
	 {
		var path = "./includes/"+form.attr('id')+".php";
		
		if(form.attr('template-path')) // Check For Template path
		{
			path = form.attr('template-path')+"/includes/"+form.attr('id')+".php";
		}
		
	 	return path
	 }
});

Код php

spoiler

<?php 
	if(empty($_POST['name']) && strlen($_POST['name']) == 0 || empty($_POST['email']) && strlen($_POST['email']) == 0 || empty($_POST['phone']) && strlen($_POST['phone']) == 0)
	{
		return false;
	}

$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];

$to = '[e-mail]'; // Email submissions are sent to this email

// Create email
$email_subject = "Message from cliex.ru.";
$email_body = "You have received a new message. \n\n".
		  "Name: $name \nEmail: $email \nPhone: $phone \n";
$headers = "MIME-Version: 1.0\r\nContent-type: text/plain; charset=UTF-8\r\n";
$headers .= "From: [e-mail]\n";
$headers .= "Reply-To: [e-mail]";
mail($to,$email_subject,$email_body,$headers); // Post message	


$url = "https://docs.google.com/a/cliex.ru/forms/d/e/1FAIpQLSckHSaBF5PdvXOi4Nd62JwnkN8NUagUNP5aXPI0lJbD1Tp6Iw/formResponse";
$post_data = array (
"entry.2040532686" => $_POST['name'],
"entry.2011303038" => $_POST['phone'],
"entry.405074234" => $_POST['email'],
"entry.1571260300" => $_POST['utm_source'],
"entry.293933265" => $_POST['utm_medium'],
"entry.104241288" => $_POST['utm_content'],
"entry.46895395" => $_POST['utm_term'],
"entry.727719035" => $_POST['utm_campaign'],  
"draftResponse" => "[null,null,&quot;4269290079343157800&quot;]",
"pageHistory" => "0",
"fbzx" => "4269290079343157800"
);

$link='#';

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
// указываем, что у нас POST запрос
curl_setopt($ch, CURLOPT_POST, 1);
// добавляем переменные
curl_setopt($ch, CURLOPT_POSTFIELDS, $post_data);
//заполняем таблицу google
$output = curl_exec($ch);
 
curl_close($ch);
//перенаправляем браузер пользователя на апсел
header('Location: '.$link);

return true;
			
?>

Comments

[Ди Ма]

$('#btn').on('click', function () {
   $(this).text('Отправка...');
});

ajax(/*... */).onResponce(function () {
  // ...
  $('#btn').text('Отправить')
});

[LezhnevM]

Ди Ма: Я не понимаю куда именно это вставить.
Можете указать куда именно подставить ваш код на примере моего кода, пожалуйста?

Answer 1

[Артем]

Перед $.ajax({ поставьте

var btn;
if($(this).is(":button") {
btn = $(this);
btn.text('Отправляется...');
}

а перед $form.trigger("reset");

if(btn) {
btn.text('Готово');
}

Написал из головы, но идея, думаю, понятна.