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

问题不在于浏览器不显示图像。事实上，一旦图像被缓存，您可以在提交表单之前看到它。

问题在于，通常在下载图像之前提交表单（并加载新页面）。

如果您想确保它会显示，您可以使用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 2

表单的提交优先于图像加载，因此它永远不会加载。您必须加载图像，然后手动提交表单：

$(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 3

意识到表单提交正在中断图像的加载，我最终在页面加载事件中使用类似$('<img/>')[0].src = 'https://icon.png';的内容预加载图标。这似乎可以现在可靠地显示图像（虽然使用动画gif我似乎没有在FF中循环，但这可能是一个单独的问题。）

Answer 4

您需要在更改图像之前停止提交表单，然后在完成交换后提交表单。为什么？在替换图像期间，表单提交仍在继续，因此您需要将其停止直到准备好。

$(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 5

您需要拦截提交，然后在进行交换后再次提交表单。

$(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();
            });
         }
    });
});

按钮图像在表单提交中断

5 个答案: