YES/NO before firing Link

Question

I need a YES/NO prompt before a link is fired. I've tried several solutions I found on but none worked out fine. None did even block the firing of the link, except confirm(). But confirm() does not give me the chance to change stuff or change the button labels. I want to add a value to the url depending on what the user chose. Another problem is that I have a list of these links on the page (events). Any help would be appreciated.

EDIT 1

$("a").click(function(e) {
    e.preventDefault();
});

is not working and in this case I don't know how to access the url. And I just want to postpone the calling of the url.

Edit 2 This is the code for the creation of the link (cakephp):

echo $this->Html->link(
    $this->Html->image('image.png',array(
      'title' => __('title'),
      'alt' => __('title')
    )),
    array(
      'action' => 'action',
      $eventId,
      $anotherVar,
      $this->Paginator->current(),
      $customerId
    ),
    array('escape' => false)
  );

Now I want to ask the customer a YES/NO question and depending on what the customer choose add another parameter to the url.

EDIT 3 The html code created thru the code above:

<a href="/system/controller/function/value1/value2">

Show us some code. What have you tried? You probably want a plugin of some sort. — putvande, Jun 19 '14 at 08:16
The code you posted does not seem to be the link itself. Without knowing the `link()` method no one can tell how the link will turn out in html and that is where you add your javascript. you should edit the html page not the php code in order to get javascript running. — magic_al, Jun 20 '14 at 08:59
@magic_al the link functions belongs to the cakephp framework. Sorry for not mentioning this earlier. — MrSmith, Jun 23 '14 at 08:14
@MrSmith the function is one part of the link. But the link array of this object is probably (I'm not familiar with cake, but as far as I know it's a MVS framework) rendered to html in an template file. This is the point to include changes to html as well as javascript. The Php-function you posted just delivers information like url, alt, title of the link... — magic_al, Jun 23 '14 at 09:30
@magic_al I don't know if I get you right. The code for the creation of the link is written as above in the view-file. It creates the html-code — MrSmith, Jun 23 '14 at 11:54
@MrSmith alright, but die information are passed to the `link()` method. This is the place where the information is wrapped to actual html. If that file is a view file (in sense of MVC) you could ad a js as I suggested before. If you are not familiar with jQuery you should read up, it's quite powerful. The code is pretty easy actually. If you struggle with it comment to the appropriate post please. — magic_al, Jun 23 '14 at 13:29

score 0 · Answer 1 · edited May 23 '17 at 11:57

0

<a href="home/about-me" onclick="return confirm('Are you sure to move to this page');">click me</a>

The simplest thing ever for any developer.

Here is a reference to custom the confirm box,

Custom Confirm Box

Else if you want to change whole box and functionality, then go for the jQuery Modal box,

jQuery Modal

edited May 23 '17 at 11:57

Community

1
1

answered Jun 19 '14 at 08:19

dipak_pusti

1,645
2
23
42

Can u read? I did said I DON'T want confirm because I want to change the button labels AND do something depending on the button clicked by the user. – MrSmith Jun 19 '14 at 08:24
In the other cases there is no postponing of the calling of the url. And I don't know why preventDefault(); isn't working. – MrSmith Jun 19 '14 at 08:49

magic_al · Answer 2 · 2014-06-19T08:29:00.110

If you want to take any action before you submit the link you can use jQuery.click(). Furthermore you can deactivate the default behaviour (following the link) by

event.preventDefault();

So you'd come up with something like that:

jQuery('a.mylink').click(function( event ){

    // prevent following link
    event.preventDefault();

    // validation and action
});

After you passed the validation and took appropriate action you can fire the click event by using:

jQuery("a.mylink").trigger("click");

Hope I got you right.

YES/NO before firing Link

2 Answers2