1

In our web application, when we upload a document, there is a remove image in the end that upon being clicked, will remove the document uploaded. The problem is users often click the icon unintentionally and they don't even know they removed something.

The code for the onclick event is

<input type="image" name="xxxxxgbcremove" id="xxxxxgbcremove" class="RemoveImage" src="..." alt="Delete" onclick="$find('xxxfieldIDxxx').removeValue(xxxx); ;" style="border-width:0px;Display:Block;">

I want to insert a confirm() function when the image is clicked, users can select yes or no to proceed or cancel the removing. the problem is I don't have control over the code above. But I do have the ability to add new scripts.

I have tried unbind click but didn't work.

$(document).ready(function() {
$("[id$='remove']").unbind('click');
});

How do I "insert" a confirm() to the onclick event that came with the app? Ideally the original onclick event should be temporarily stopped before user make decision in the confirm() box, if user click yes, then proceed with the original remove procedure.

Thanks!

2
  • 1
    Exactly why don't you have control of the output HTML?
    – BenM
    Apr 2, 2013 at 14:26
  • Ben - The application is a vendor application, we don't have the ability to change anything in the app, we are end users, but we have the option to add scripts to the page.
    – user651839
    Apr 2, 2013 at 14:29

2 Answers 2

1

Inline event handlers can't be disabled by jQuery's unbind(), you'll need to change the inline handler and add whatever code you need :

$(document).ready(function() {
    var myOnclick = $("[id$='remove']").attr('onclick');
    $("[id$='remove']").attr('onclick', 'if (confirm("Continue")) ' + myOnclick);
});

Be aware that your selector could match more than one element, and then you'd need to iterate.

EDIT:

Or if there's more than one element:

$(document).ready(function() {
  $("[id$='remove']").each(function(i, ele) {
     $(ele).attr('onclick', 'if (confirm("Continue")) ' + $(ele).attr('onclick');
  });
});
4
  • thanks adeneo, looks great, I tried it, but somehow it didn't work, when I click the image the first time, nothing happens, if I click it again, it removes the document. any idea why?
    – user651839
    Apr 2, 2013 at 14:42
  • It worked to me, maybe you have more than one item for $("[id$='remove']"). Check on the console $("[id$='remove']").length how many items gives you.
    – kpull1
    Apr 2, 2013 at 14:54
  • @user651839 - it's just an example of how to change the inline click handler, which is pretty much your only option here, and I got it working in a FIDDLE, but as for how you'd structure this to get everything right on your own page to make it work, that's hard to answer? Are there several elements with an ID that ends with remove, if so you'll need a loop etc.
    – adeneo
    Apr 2, 2013 at 14:54
  • I only see one but there will be. Could you provide a simple sample with loop? I'll research for the rest, I'm not a developer, I usually google and find my answer. Thanks for helping.
    – user651839
    Apr 2, 2013 at 14:59
0

does it work?:

onclick="if (confirm('my message')) $find('xxxfieldIDxxx').removeValue(xxxx);"
1
  • the xxx is dynamic, change every time a document is uploaded, so I can't hard code it like this. but thanks though.
    – user651839
    Apr 2, 2013 at 14:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.