Question

我使用以下

提交了一份AJAX表格

$('#savelink').click(function(){
$("#overlay_form").fadeOut(500);
$.ajax({
    url: 'linktextadd.php',
    type: 'GET',
    data: "content="+$("input[id=linktext]").val(),
    dataType:"json",
    success: function(data){
        location.reload();
    },
    error: function(jqXHR, textStatus, errorThrown){
        alert(jqXHR+" || " + textStatus+" || " +errorThrown)
    }
  });

}）

如果我使用按钮标准

，它可以正常工作

<input id='savelink' type="button" value="Save" />

但是，如果我尝试用图像来完成任务

<input id='savelink' type="image" src="images/large-save.png" alt="Save" value="Save"  title="Save" />

它抛出错误（textstatus）“错误” - 有用：P

看起来它甚至没有到达PHP页面，因为没有被触发的mail（）标志

如果我将相同输入代码的类型更改为按钮，则可以再次使用

<input id='savelink' type="button" src="images/large-save.png" alt="Save" value="Save"  title="Save" />

但当然我失去了漂亮。

想法？

[解决方案] 为了说清楚，这是解决方案

$('#savelink').click(function(e){
    e.preventDefault;
    $("#overlay_form").fadeOut(500);

Answer 1

当您将输入类型设置为image时，该按钮将充当submit按钮。这意味着您需要禁止提交事件。

$('#savelink').click(function(evnt){
   evnt.preventDefault();
   ...

Answer 2

您可以使用<button>

<button id="savelink"><img src="images/large-save.png" alt="Save"></button>

AJAX保存适用于按钮但不适用于图像

2 个答案: