SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    66
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    message box verifaction

    Hello!
    I would like to add message verifcation in JS to ask the user "Are you sure you want to perform this action?" before it's making the action (in my case - removing some user details in PHP)
    how I can do that?
    Owner of uReviews & MovieDB - Movie Database

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    You could use a confirm dialogue.

    https://developer.mozilla.org/en-US/...Window.confirm

    @felgall ;
    I have heard you say these are only for debugging purposes.
    Is there an alternative that I have overlooked?

  3. #3
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    confirm, alert, prompt and the likes block the browser and therefore are considered bad practice by many (not to demonize, I use them myself sometimes, but it's nice to be aware of it and follow better standars if the project allows it). of course they're super good for debugging/prototyping.
    the alternative is simply an html modal/popup.
    obviously it can't be used the same way since it's not-blocking and "asyncronous" so you'd have to refactor using callbacks, or, if you're super cool, promises

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Thanks.
    So what is a better way of confirming if a user really wants to perform an action (for example to ensure that they didn't click on 'delete' by mistake)?

    Edit:

    I see you updated your answer to include HTML modal. Could you point me to an example of what you mean?

  5. #5
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    You can omit putting a submit type button for the form. Then you use a normal button type instead, display a dialog on click, and only .submit() the form if the dialog returns the sure value.

    It helps if the confirmation dialog is modal: http://jqueryui.com/dialog/#modal-message.

  6. #6
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the better way is simply to show a custom, relatively positioned div (and maybe fade the rest of the page to black) with buttons, like
    http://getbootstrap.com/javascript/#modals
    http://jqueryui.com/dialog/#modal-confirmation
    or making your own.

    If you do things smartly you will keep a single one in the DOM and change its message and buttons labels as you need, while binding the appropriate function callbacks to handle the pressing of the buttons.

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,604
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by davidfregoli View Post
    the better way is simply to show a custom, relatively positioned div (and maybe fade the rest of the page to black) with buttons, like
    http://getbootstrap.com/javascript/#modals
    http://jqueryui.com/dialog/#modal-confirmation
    or making your own.

    If you do things smartly you will keep a single one in the DOM and change its message and buttons labels as you need, while binding the appropriate function callbacks to handle the pressing of the buttons.
    That's definitely the right way to do it.

    The confirm dialog is considered by some browsers to be for debugging purposes and so may display an extra checkbox to aid in debugging - for example by making it easy to turn JavaScript off.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  8. #8
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    I use built-in alerts and the such quite often, because making modals accessible, especially for screen readers, is still eating the hottest chicken vindaloo and pooping it out in an endless trial of fire and dirty poophacks.

    Some day the modal dialog will be built into the browser where it belongs, instead of the long string of cringeworthy a11y-hacks and manual keyboard focus it is now.

    That said, I'm always pleased when I run across some plugin thingie where someone took the time to do all the hacks for me. I'm looking for a lighbox-container for dialogs and popups and have seen a few now with keyboard-traps, default-escapes, multi-language keybindings (even control keys often aren't the same code across different-language keyboards, so even listening for ENTER can be complicated depending on who you're supporting) and the like.

    But I'm still of the opinion that developers on the front shouldn't have to be building these wheels over and over again.


    Also, the fact that everything stops until that confirm/alert/whatever is dealt with, is sometimes exactly what you want, which should also help you decide which type you'd want to use.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •