Question

i have an ajax function for uploading photos, and this function is executed onclick.
What i want is to delete the onclick event on succes, and to change the button style, in the uploadPhoto. How can this be done?

  function uploadPhoto(image_path, message){
        var data = {
            "image_path": image_path,
            "message": message
        };
        var url = 'upload_photo.php';
        $.ajax({
            type: 'POST',
            url: url,
            data: data,
            async: true,
            dataType: 'json',
            success: function(response) {
                    //alert(response.code);
                  }
                });
    }



      <a href="#" onclick="uploadPhoto('/images/blah.jpg', 'something'); return false;"><img style = "padding-top: 15px; padding-left: 125px;" src= "images/posteaza_pe_wall.png"></a>

Answer 1

You should really be using JQuery click events, but, this should do what you want. Assign an ID to your a href, and then remove the onclick attribute on your ajax success.

You need to define what you mean by “change the button style”, because your link is currently an image. As an example, I have included an example adding a new class to the a href upon success called “uploadStyle”. You would need to define this in CSS.

function uploadPhoto(image_path, message){ 
        var data = { 
        "image_path": image_path, 
        "message": message 
    }; 
    var url = 'upload_photo.php'; 
    $.ajax({ 
        type: 'POST', 
        url: url, 
        data: data, 
        async: true, 
        dataType: 'json', 
        success: function(response) { 
                $("#uploadHref").removeAttr("onclick");
                $("#uploadHref").addClass("uploadStyle");
                //alert(response.code); 
              } 
            }); 
} 

<a id="uploadHref" href="#" onclick="uploadPhoto('/images/blah.jpg', 'something'); return false;"><img style = "padding-top: 15px; padding-left: 125px;" src= "images/posteaza_pe_wall.png"></a>