как отключить несколько кнопок формы при отправке формы и при этом выполнить правильное действие

Question

У меня есть форма с несколькими кнопками отправки.Я просто хочу отключить их после нажатия, и все работает нормально, пока я не «отключу» их в обработчике JQuery .submit (), и в этом случае форма больше не отображается для отправки информации об имени / значении кнопки вместе с формой,Как отключить кнопки, но при этом указать имя / значение кнопки, чтобы определить, какая из них была нажата?

Форма

<form action="myaction" method="post" name="sendgift" id="sendgift" > 
    ....input, etc ....       
    <input type="submit" name="_action_go" value="Looks great! Do it" id="sendgiftbtn" />
    <input type="submit" name="_action_index" value="I need to make changes" id="gobackbtn" />
</form>

JS:

<script type="text/javascript">
    $("#sendgift").submit(function() {

       //if I remove these two lines, everything works
       $("#sendgiftbtn").attr('disabled', 'disabled');
       $("#gobackbtn").attr('disabled', 'disabled');

        console.log("disable buttons called");
        return true;
    });


</script>

Answer 1

Атрибут disabled удаляет элемент из отправки формы по проекту: http://www.w3schools.com/tags/att_input_disabled.asp

3 подхода:

1. Если вы хотите сделать«кажется», что элемент формы отключен, вы можете js сохранить значение поля в скрытой переменной <input type='hidden' value='[the value of the disabled field]' name='[name of disabled field]' />, а затем отключить видимый ввод.

2. Вы также можете попробоватьстилизовать поле как отключенное и добавить событие onfocus, которое blur() s поле каждый раз, когда пользователь пытается изменить его снова.

3. Вы можете добавить событие onsubmit в форму,-отключает любые входы с установленным атрибутом disabled, чтобы они отправлялись как обычно.

Answer 2

В этом случае вместо отключения кнопок добавьте класс disabled и проверяйте этот класс всякий раз, когда вы submit form. Если класс присутствует, просто return false else true и перед возвратом true добавьте класс disabled ко всем buttons типа submit.

 $("#sendgift").submit(function(e) {

        if(!$(e.target).hasClass('disabled')){
            //if I remove these two lines, everything works
            //$("#sendgiftbtn").attr('disabled', 'disabled');
            //$("#gobackbtn").attr('disabled', 'disabled');

            //console.log("disable buttons called");

            $(this).find('input[type=submit]').addClass('disabled');

            return true;
        }
        return false;
    });

Определяет стиль кнопки disabled как

.disabled{
  padding: 0px 6px 0px 6px;
  border: 2px outset ButtonFace;
  color: GrayText;
  cursor: inherit;
}