Display confirmation popup with JavaScript upon clicking on a link

Question

How do I make one of those hyperlinks where when you click it, it will display a popup asking "are you sure?"

<INPUT TYPE="Button" NAME="confirm" VALUE="???" onClick="message()">

I already have a message() function working. I just need to know what the input type for a hyperlink would be.

Answer 1

As Nahom said, except I would put the javascript:message() call directly in the href part (no need for onclik then).

Now, your message routine must not only ask the question, but also use the answer: if positive, it must call submit() on the form to post the form. You can pass this in the call to ease the fetching of the form.

Personally, I would go for a button (input tag as you show) instead of a simple link to do the process: it would use a more familiar paradigm for the users.

[EDIT] Since I prefer to verify answers I give, I wrote a simple test:

<script type="text/javascript" language="JavaScript">
function AskAndSubmit(t)
{
  var answer = confirm("Are you sure you want to do this?");
  if (answer)
  {
    t.form.submit();
  }
}
</script>

<form action="Tests/Test.html" method="GET" name="subscriberAddForm">
<input type="hidden" name="locationId" value="2721"/>
<input type="text" name="text" value="3.1415926535897732384"/>
<input type="button" name="Confirm" value="Submit this form" onclick="AskAndSubmit(this)"/>
</form>

Yes, the submit just reload the page here... Tested only in FF3.

[EDIT] Followed suggestion in the comments... :-)

Answer 2

<a href="http://somewhere_else" onclick="return confirm()">

When the user clicks the link, the confirm function will be called. If the confirm function returns false, the link traversal is cancelled, if true is returned, the link is traversed.

Answer 3

<a href="#" onclick="message(); return false;">???</a>

This answer would be OK only when the click need NOT navigate the user to another page.

Answer 4

<a href="http://something.com" onclick="return confirmAction()">try to click, I dare you</a>

with the function

function confirmAction(){
      var confirmed = confirm("Are you sure? This will remove this entry forever.");
      return confirmed;
}

(you can also return the confirm right away, I separated it for the sake of readability)

Tested in FF, Chrome and IE