Изменить идентификатор кнопки обратно при неудачной отправке формы

Question

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

Вот соответствующая часть формы:

<input name="formsubmit" type="submit" id="button" value="Submit!">

Мне удалось собрать следующий фрагмент jQuery:

jQuery('#formid').submit(function() {
     jQuery('#button').attr('id', 'button-post');
     jQuery('#button').attr('disabled','disabled');
});

Это именно то, что янеобходимость.Проблема в том, что я использую встроенный плагин проверки jQuery ( Ссылка ), и когда вы попадаете на форму и отправляете форму без заполнения полей и нажимаете кнопку отправки, идентификатор кнопки изменяется так, как я хочуно поскольку используемый мной плагин возвращает ошибки, поскольку обязательные поля не заполнены, атрибут id кнопки не изменится на исходный идентификатор.

Есть ли способ обойти это?Возможно, это способ проверить, была ли форма успешно отправлена, или, может быть, одно из других обязательных полей больше определенной длины?

Спасибо за помощь.

Answer 1

Ну, во-первых, ID должны измениться, это плохая практика. Для этого и используется класс.

Но в любом случае, решение проблемы может заключаться в том, чтобы фактически обработать запрос ajax самостоятельно.

jQuery('#formid').submit(function() {    
    var options = 
    {
        //Define ajax options
        url : '' //your http request target
        type: "post",
        target: "#responsePanel",
        beforeSend: function()
        {
            // button-disabled is a CSS class that would have your visual effects for the
            // changed button.
            jQuery('#button').addClass("button-disbaled").attr('disabled','disabled');
        },        
        success: function(response, statusString, xhr)
        {
            // process your response.
        },
        error: function(response, status, err)
        {
           //Handle your error here.
           jQuery('#button').removeClass("button-disbaled").attrRemove('disabled');
        }
     }
     $.ajax(options);
});

ПРИМЕЧАНИЕ, код не проверен, могут быть ошибки.

Answer 2

Измените это на:

jQuery('#formid').submit(function() {
  if ($("#formid").validationEngine('validate')) {
     jQuery('#button').attr('id', 'button-post');
     jQuery('#button').attr('disabled','disabled');
  }
});

Это гарантирует, что ваша проверка пройдена до изменения состояния кнопки.

Answer 3

Почему вы меняете идентификатор кнопки - конечно, вам просто нужно отключить CSS-класс на ней?

Я думаю, вы могли бы проверить, прошла ли проверка успешно, и отправить форму, если она есть.:

$("#button").click(function() 
{
     if your validation is OK
     {
        jQuery('#button').attr('id', 'button-post');       
         jQuery('#button').attr('disabled','disabled');
         document.forms["myform"].submit();
     }
});