Jump to content

Recommended Posts

Hello

I want to show an alert or confirmation when somebody click on "delete" button.  There are many examples on line and I have read at least 10 posts on some exchange website which sadly has never worked for me (those of you who are old users of internet probably remember a stupid website called expertvillage.  This expertexchange sites must be related).

The code is pretty straight forward and it actually generate a confirm alert but no matter which option the viewer clicks it goes ahead and deletes (send the viewer to a page that deletes).  Just as if there was no confirmation alert at all.

I do not know JS and frankly never liked it, but I think it not working has more to do than just me not liking the language.

Here is a code, any idea or suggestions is highly appreciated:

<form action=deletetest.php method=POST>

<input type=submit value=\"Delete records\" onclick=\"ConfirmDelete()\">

</form>

<script>

function ConfirmDelete()

    {

    return confirm("Are you sure you want to delete?");

    }

</script>

 

 

Edited by PHP5000
Link to comment
https://forums.phpfreaks.com/topic/325727-example-of-a-functional-confirm-delete/
Share on other sites

The "expert sex change" website still exists? Wow. That's amazing.

The way for this (dated) design to work is that onclick has to return true/false. Right now, all it does is execute a function. Yes, that function returns true/false itself, but nothing happens with that value. It's just like writing

function onclick() {
  ConfirmDelete();
}

You should try to do Javascript the modern way, which is "modern" for very good reasons, but if you won't then you fix this problem by making the onclick code "return" a value.

I've hidden your, let's say, unconstructive post.

Since I'm an actual developer who wants to see other people learn and grow so they can become actual developers, I don't tell people something that they can copy and paste into their code. I give them information and hope that they're willing to put in the time and effort into understanding what it is they're doing. So thank you for your feedback but I'm going to continue calling out instances of people writing 1990s-era Javascript without understanding what they're doing and why it isn't working. After all, there's a very simple and fundamental principle in play right here: if you're going to work with something, the least you can do is try to learn more about it.

If you want something to tell you the answer so that you can copy and paste it into your code then you already know about ChatGPT, but did you also know you can do things like throw terms like "javascript onclick modern way" into Google and it'll spit out some AI nonsense of its own that is actually occasionally useful?

image.png

 

I tend to assume people will invest time into a thread so I tend to avoid writing long knowledge-dump replies - because it's too much information at once, and also becomes sometimes it turns out to be a waste of my time - but had this thread continued, maybe it could have gone like this:

Q: Okay, so I understand that onclick is just executing code, but what do you mean it isn't returning a value? The return statement is right there.
A: Yes, the return statement for ConfirmDelete, but there's no return statement for the onclick itself. Like I said, it is basically a function even though it's written as an attribute in the HTML, and it's that function that needs to return true/false.

Q: So is that the modern way? Returning from the onclick?
A: No, the modern way is to not use any of those on* attributes and instead attach events through Javascript. As in, when the page loads you run a bit of Javascript that attaches events to whatever elements it needs to using addEventListener.

Q: I read up on addEventListener and switched to using it, but now when I click the button, I get the confirmation and it still submits the form. [Insert code here.]
A: That's because event handlers done through addEventListener work a little differently. You can't just return false to stop the event - the code needs to be a little more sophisticated in that it explicitly says "stop the event"... except you don't actually need that. There's another way that (IMO) is simpler to work with.

Q: What's the other way?
A: Instead of making the button be a submit button, make it be a regular button. And instead of making the event handler stop the form from submitting, it directly makes the form submit. Meaning instead of "if not confirmed then stop" it's now "if confirmed then submit". Which probably makes more sense from a human-being angle: you typically think about these things in a proactive way like "if I click the button then I want to get a popup asking me if I'm sure I want to submit the form" (which the new code would say) and not the reactive way of "if I click the button then submit the form, but only first after asking the user if they want to" (which the old code says). It's a subtle distinction, and admittedly not one that's relevant all the time.

Q: I don't follow. What would I do differently?
A: Change the button to a regular "button"-type button, keep with the addEventListener, but change your popup thing to be "if (confirmed) { submit form }". [Insert code here.]

Q: That sounds complicated. Why should I do all this when I could have just stayed with onclick and returning true/false?
A: Because if you ever want something fancier than the confirmation popup you have now, the onclick+return pattern simply won't work. You can only do that when the code can make an immediate determination of whether or not to continue with submitting the form. If the confirmation was any sort of Web 2.0-style modal then it couldn't return immediately and you'd be forced into this alternate scheme. You might as well get used to the pattern now so it'll be easier to remember when you need it. Besides, it's not like it's a huge amount of work, and the additional work compared to onclick+return isn't wasted because you're improving the quality of the code as you go. And quality of code directly translates into quality of life.

  • Great Answer 1

1. the fact that you removed my post and added a long and dull answer to a comment that you did not have th eballs to face proves you are full of sh..

2. d umb a ss, just because somebody wants to see an example of a functioning code it does not mean he wants to copy and paste it you num bskull. Old windbags like you may make replies and say things that are wrong or not working.  A working example proves that the answer is not waste of time.

This is the last time I am wasting time in this idiotic gathering of knowitall windbags so save your answer for your fat as s you insufferable bore.

  • Haha 1
1 hour ago, PHP5000 said:

1. the fact that you removed my post and added a long and dull answer to a comment that you did not have th eballs to face proves you are full of sh..

2. d umb a ss, just because somebody wants to see an example of a functioning code it does not mean he wants to copy and paste it you num bskull. Old windbags like you may make replies and say things that are wrong or not working.  A working example proves that the answer is not waste of time.

This is the last time I am wasting time in this idiotic gathering of knowitall windbags so save your answer for your fat as s you insufferable bore.

This is so funny.

The fact that you can't even follow forum rules and requirements when posting indicates the lazy sod that you are. If you want to learn, there is a great community of developers here who will teach you. But, at least show some effort. You don't even put your code into formatted "Code" when posting, making it almost impossible to read.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.