Перетаскивание изображения кнопки на форме submit

Question

Я пытаюсь изменить src изображения в пределах элемента кнопки при отправке формы. По какой-то причине новое изображение src не загружается (сломанное изображение ссылки в chrome, ничего в FF), когда форма отправляется, однако, если я использую return false;, я могу видеть, что изображение обменивается правильно. Попробовали использовать фоновые изображения, и это, похоже, работает, но оно смешивается со стилями кнопок пользовательского агента по умолчанию.

Вот код, который я использую, и образец скрипки (смените return true; на return false;, чтобы увидеть изображение, работающее).

<form method="post" id="testForm" action="#"> 
    <input type="text" name="someField" /> 
    <button type="submit">Submit <img src="" /></button>  
</form> 

.

$(document).ready(function() { 
    $("#testForm").submit(function() { 
     var submitBtn = $("#testForm").find("button"); 
     submitBtn.attr("disabled", true).find("img")[0].src = "https://cdn1.iconfinder.com/data/icons/silk2/car.png"; 
     return true; 
    }); 
}); 

http://jsfiddle.net/LV326/15/

Любые идеи, почему форма их представления может повлиять на имидж? Я уверен, что это что-то простое, но у меня было довольно много времени. Заранее спасибо.

Answer 1

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

$(document).ready(function() { 
    var submitted = false; 
    $("#testForm").submit(function (e) { 
     if (submitted) return; 
     e.preventDefault(); 

     var submitBtn = $("#testForm").find("button"); 
     var img = submitBtn.attr("disabled", true).find("img")[0]; 

     img.onload = function() { 
      $("#testForm").submit(); 
     }; 

     submitted = true; 
     img.src = "https://cdn1.iconfinder.com/data/icons/silk2/car.png"; 
    }); 
}); 

Однако форма Подающий будет (обычно) вызывают страницы для перенаправления. Если вы не хотите, чтобы это произошло, рассмотрите XMLHttpRequest.

Answer 2

Вам необходимо прекратить отправку формы до того, как вы измените изображение, а затем отправьте его, как только это будет сделано подкачкой. Зачем? Сообщение формы продолжается во время замены изображения, поэтому вам нужно остановить его до готовности.

$(document).ready(function() { 
    $("#testForm").submit(function (e) { 
     e.preventDefault(); // stops form submission long enough to swap 
     var submitBtn = $("#testForm").find("button"); 
     submitBtn.attr("disabled", true).find("img")[0].src = "https://cdn1.iconfinder.com/data/icons/silk2/car.png"; 
     $("#testForm").submit(); // submits it when ready 
    }); 
}); 

Предпочтительный способ справиться с этим, чтобы изменить представить обычную кнопку и использовать событие щелчка, как это:

$(document).ready(function() { 
    $("#testFormButton").click(function (e) { 
     $("#testFormButton").attr("disabled", true).find("img")[0].src = "https://cdn1.iconfinder.com/data/icons/silk2/car.png"; 
     $("#testForm").submit(); // submits it when ready 
    }); 
}); 

Таким образом, вы не имеете форму, когда вы плохо себя вести не хочу этого. Вы контролируете, когда он отправляет. Работает точно так же, но вы можете сделать все, что вам нужно в первую очередь.

Answer 3

Вам необходимо перехватить отправку, а затем отправить форму еще раз после обмена.

$(function() { 
    var submitted = false; 
    $("#testForm").submit(function (e) { 
     var frm = this; 
     if (!submitted) { 
      e.preventDefault(); 
      var submitBtn = $("#testForm").find("button"); 
      var img = submitBtn.attr("disabled", true).find("img"); 
      img[0].src = "https://cdn1.iconfinder.com/data/icons/silk2/car.png"; 
      submitted = true; 
      img.load(function() { 
       $(frm).submit(); 
      }); 
     } 
    }); 
}); 

Answer 4

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

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

Если вы хотите, чтобы убедиться, что он будет отображаться, вы можете использовать preventDefault, чтобы избежать отправки формы, а также добавить обработчик в load событие к изображению, которая представляет форму:

$("#testForm").submit(function (e) { 
    var that = this; 
    e.preventDefault(); 
    $("#testForm").find("button") 
     .attr("disabled", true) 
     .find("img") 
      .on('load', function(){ that.submit(); }) 
      .attr('src', "https://cdn1.iconfinder.com/data/icons/silk2/car.png"); 
}); 

Вы могли бы также рассмотреть вопрос о с помощью тайм-аута, чтобы убедиться, что изображение отображается в течение некоторого времени:

.on('load', function(){ setTimeout(that.submit, 1000); }) 

Answer 5

Понимая, что представление формы прерывания загрузки изображения, я закончил поджимать значок, используя что-то вроде $('<img/>')[0].src = 'https://icon.png'; в событии загрузки страницы. Кажется, что изображение теперь надежно отображается (хотя анимированный gif im using, похоже, не петляет в FF, но это может быть отдельной проблемой).