Can I/how do I use an OnClick with an if statement in?

Question

I am trying to create a button that when pressed deletes a database entry, when I click it I want a message to say "are you sure you want to delete this" and then if I click cancel the message goes away and nothing happens, if I click okay the deletion runs -- but also it reloads the page, I think this will require a jquery(this is what I would like it to be in ) if statement that basically says if ok is clicked then run the default and also refresh the page after the code has run.

so far I have

<button name="del" type="submit" value="1" onclick="return confirm('Are you sure you want to delete this?') "> delete</button>

Please tell me if I am going the wrong way with this and if I am not, please help me out with how to write the if, (I have infact searched for this and the information is not complete enough for me to understand, I am a PHP developer, never used any Javascript before in my life but would like to start)

EDIT: if this is a caching issue how do I solve it?

Answer 1

I believe your issue is more of a caching issue and reloading the page after a form submission is not efficient since you are performing an unneeded roundtrip to the server, however if that's what you want here's one way of doing it:

PS: Remove the onclick attribute on your submit button.

document.addEventListener('DOMContentLoaded', function () {
    initDeletionPage(document.getElementById('the-id-of-the-form-to-target'));
});

function initDeletionPage(deletionForm) {
    refreshPageIfNeeded();
    deletionForm.addEventListener('submit', onSubmit);

    function refreshPageIfNeeded() {
        if (sessionStorage.getItem('pageRefreshNeeded')) {
            sessionStorage.removeItem('pageRefreshNeeded');
            location.reload();
        }
    }

    function onSubmit(e) {
        if (!confirmDeletion()) e.preventDefault();
        else indicatePageRefreshNeededAfterSubmission();
    }

    function confirmDeletion() {
        return confirm('Are you sure you want to delete this?');
    }

    function indicatePageRefreshNeededAfterSubmission() {
        sessionStorage.setItem('pageRefreshNeeded', true);
    }
}

Sorry but I asked for a more Jquery way

Ok...

$(function () {
    initDeletionPage('#the-id-of-the-form-to-target');
});

function initDeletionPage(deletionForm) {
    refreshPageIfNeeded();
    $(deletionForm).submit(onSubmit);

    function refreshPageIfNeeded() {
        if (sessionStorage.getItem('pageRefreshNeeded')) {
            sessionStorage.removeItem('pageRefreshNeeded');
            location.reload();
        }
    }

    function onSubmit(e) {
        if (!confirmDeletion()) e.preventDefault();
        else indicatePageRefreshNeededAfterSubmission();
    }

    function confirmDeletion() {
        return confirm('Are you sure you want to delete this?');
    }

    function indicatePageRefreshNeededAfterSubmission() {
        sessionStorage.setItem('pageRefreshNeeded', true);
    }
}