Using onclick on an element

Question

I have an a element containing an href attribute. Clicking on it would delete data so I want the user to confirm that action. The href attribute refers to a php file with an id of the data that will be deleted in the GET parameter. I've added an onclick attribute, that should execute the following piece of JS (it shows a Semantic UI modal that asks for confirmation):

    confirmmodal = function () {
    beforeunload = function () {
        $('.ui.basic.modal')
            .modal({
                closable: false,
                onDeny: function () {
                    return false;
                },
                onApprove: function () {
                    return true;
                }
            })
            .modal('show')
        ;
}
}

But when I run this it still goes to the page that would delete the data (although I haven't built it yet, so nothing is deleted). Would there be an option that gives the onclick attribute priority over the href attribute somehow?

What modal do you use, what jQuery plugins, what html code is behind? How do you call the modal? Please provide all required code. — skobaljic, Aug 13 '16 at 21:37
Possible duplicate of [How to stop default link click behavior with jQuery](http://stackoverflow.com/questions/5632031/how-to-stop-default-link-click-behavior-with-jquery). And you need to do that outside of the callback, so use prevent default. — Robert Moskal, Aug 13 '16 at 21:38
Why can't you have the href of the link point to and trigger the modal window and the confirm modal either contain the link to the other page or trigger a function that performs an AJAX call to that page? hat way the delete link in the page cannot cause the delete action and the modal can be closed without triggering the delete - or it can allow the delete actionto occur if "confirm" is hit. — gavgrif, Aug 13 '16 at 21:56

score 1 · Answer 1 · answered Aug 13 '16 at 21:40

1

You need to add event.preventDefault() at the end of your code.

Eg:

<a href="somePage.php" onclick="showDialog(event)">Delete</a>



function showDialog(e) {
    // custom code to show dialog here
    e.preventDefault();
}

answered Aug 13 '16 at 21:40

Vandesh

6,368
1
26
38

score 0 · Answer 2 · answered Aug 13 '16 at 22:44

Okay, I got there with a few tweaks on the script, taking gavgrif's comment into account as well.

I made the <a> element a little different, so it won't contain an href attribute anymore:

<a title="Delete post"  onclick="confirmmodal(this)" data-postid="'. $row['postnr'] .'"><i class="large delete middle aligned icon"></i></a>

Now, if the icon is clicked, the postid is available for the JS as well, so we can just refer to that in the GET parameter when the confirm button is clicked:

confirmmodal = function (a) {
    $('.ui.basic.modal')
        .modal({
            closable: false,
            onDeny: function () {
                return true;
            },
            onApprove: function () {
                window.location.href = "deletepost.php?id=" + a.dataset.postid
                return true;
            }
        })
        .modal('show')
    ;
}

Which is a semi-ugly fix, but it's not that many more lines, and I don't know s*** about JQuery :)

Thanks for all the help, I almost got there with preventDefault() but I couldn't continue if the action was confirmed, so this is an easier solution.

Using onclick on an element

2 Answers2