Изменить цвет фона кнопки после отправленного действия (после одного нажатия)

Question

Здравствуйте, у меня есть контактная форма. Я хочу сделать это с помощью PHP. И у меня есть кнопка отправки, я хочу, чтобы все поля были готовы нажать, когда электронная почта была отправлена ​​для изменения моей кнопки. Сначала в моей кнопке находится текст с желтым фоном, а текст - «Отправить». Когда я нажимаю кнопку и отправляется письмо, я хочу изменить цвет фона красным цветом, и я хочу добавить значок в сторону текста, текст изменен в «Отправлен». Как я могу это сделать?

Answer 1

<script src="jquery.min.js"></script> 

<script > 
function button(){ 
    //your ajax code for sending data 
    /* function retrieveData(){ 
     $.post('server.php',{}, function(data){ 
    });*/ 

    $("#button").attr('value', 'Sent'); 
    $("#button").css("background-color","red") 
} 
</script> 

<input type="button" id="button" name="button" value="Send" onclick="button()"> 

Попробуйте это. Вы можете сделать это с помощью javascript.

Answer 2

У вас есть форма с несколькими входами и кнопка отправки.

Вы хотите манипулировать кнопкой отправки после заполнения всех полей формы и, наконец, манипулировать им снова после нажатия кнопки отправки.

Что вам нужно сделать, это написать немного JavaScript (либо простой ванили или JQuery, выбрать то, что подходит вам лучше всего) обрабатывать две вещи в вашей форме

1. поля ввода вашей формы (для первой кнопки отправки change): Прикрепите событие к полям ввода, чтобы проверить правильность, как вы пожелаете, и соответствующим образом измените кнопку отправки.
2. Кнопка отправки вашей формы (для второго изменения кнопки отправки): Прикрепите событие клика к кнопке отправки (и не забудьте указать значение по умолчанию, поэтому после нажатия кнопки отправки она будет обрабатываться так, как вы желаю.

Я написал вам пример, где в моем случае у меня есть два входа в моей форме и кнопку, которая является инвалидом и неактивно-аута по умолчанию представить. Как только все поля формы являются filled- (не пуст), кнопка отправки становится активной (отключить атрибут и изменить цвет) - наконец, когда нажата кнопка отправки, она изменит цвет на зеленый, как указание на то, что он был нажат.

$('#myForm input').on('keyup',function(){ 
    var validated = true; 
    $('#myForm input').each(function(){ 
     if($(this).val() === ''){ 
     validated = false; 
    } 
    }); 
    if(validated){ 
     $('#submitBtn').removeClass('disabled').prop('disabled',false); 
    }else{ 
     $('#submitBtn').addClass('disabled').prop('disabled',true); 
    } 
}); 

$('#submitBtn').on('click',function(e){ 
    e.preventDefault(); 
    e.stopImmediatePropagation(); 
    $(this).addClass('submited').prop('disabled',true); 

    // the rest of your code for submission.. 
}); 

Вот простой полностью рабочий пример: https://jsfiddle.net/wx9gonrh/

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

В вашем случае вы можете захотеть включить метод асинхронного для изменения кнопки отправки только после того, как электронные писем были успешно отправлены (например, Аякс полного \ сделано событие)

Надеется, что это помогает!