<p>If you have a JSF <code>&lt;h:commandLink&gt;</code> (which uses the <code>onclick</code> event of an <code>&lt;a&gt;</code> to submit the current form), how do you execute JavaScript (such as asking for delete confirmation) prior to the action being performed?</p>

[{'answer_id': 73644, 'author': 'Grant Wagner', 'author_id': 9254, 'author_profile': 'https://Stackoverflow.com/users/9254', 'pm_score': 4, 'selected': True, 'text': '<pre><code>&lt;h:commandLink id="myCommandLink" action="#{myPageCode.doDelete}"&gt;\n    &lt;h:outputText value="#{msgs.deleteText}" /&gt;\n&lt;/h:commandLink&gt;\n&lt;script type="text/javascript"&gt;\nif (document.getElementById) {\n    var commandLink = document.getElementById(\'&lt;c:out value="${myPageCode.myCommandLinkClientId}" /&gt;\');\n    if (commandLink &amp;&amp; commandLink.onclick) {\n        var commandLinkOnclick = commandLink.onclick;\n        commandLink.onclick = function() {\n            var result = confirm(\'Do you really want to &lt;c:out value="${msgs.deleteText}" /&gt;?\');\n            if (result) {\n                return commandLinkOnclick();\n            }\n            return false;\n        }\n    }\n}\n&lt;/script&gt;\n</code></pre>\n\n<p>Other Javascript actions (like validating form input etc) could be performed by replacing the call to <code>confirm()</code> with a call to another function.</p>\n'}, {'answer_id': 73800, 'author': 'noah', 'author_id': 12034, 'author_profile': 'https://Stackoverflow.com/users/12034', 'pm_score': 1, 'selected': False, 'text': '<p>You can still use onclick. The JSF <a href="http://java.sun.com/javaee/javaserverfaces/1.2/docs/renderkitdocs/HTML_BASIC/javax.faces.Commandjavax.faces.Link.html" rel="nofollow noreferrer">render kit specification</a> (see Encode Behavior) describes how the link should handle it. Here is the important part (what it renders for onclick):</p>\n\n<pre><code>var a=function(){/*your onclick*/}; var b=function(){/*JSF onclick*/}; return (a()==false) ? false : b();\n</code></pre>\n\n<p>So your function wont be passed the event object (which isn\'t reliable cross browser anyway), but returning true/false will short-circuit the submission.</p>\n'}, {'answer_id': 82125, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 0, 'selected': False, 'text': '<p>In JSF 1.2 you can specify onclick events.</p>\n\n<p>Also, other libraries such as <a href="http://myfaces.apache.org/" rel="nofollow noreferrer">MyFaces</a> or <a href="http://www.icefaces.org" rel="nofollow noreferrer">IceFaces</a> implement the "onclick" handler.</p>\n\n<p>What you\'d need to do then is simply:</p>\n\n<pre><code>&lt;h:commandLink action="#{bean.action}" onclick="if(confirm(\'Are you sure?\')) return false;" /&gt;\n</code></pre>\n\n<p>Note: you can\'t just do <code>return confirm(...)</code> as this will block the rest of the JavaScript in the onClick event from happening, which would effectively stop your action from happening no matter what the user returned!</p>\n'}, {'answer_id': 82962, 'author': 'Victor', 'author_id': 14514, 'author_profile': 'https://Stackoverflow.com/users/14514', 'pm_score': 0, 'selected': False, 'text': '<p>If you want to execute something before the form is posted, for confirmation for example, try the form event onSubmit.  Something like:</p>\n\n<pre><code>myform.onsubmit = function(){confirm("really really sure?")};\n</code></pre>\n'}, {'answer_id': 510671, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 0, 'selected': False, 'text': '<p>This never worked for me, </p>\n\n<pre><code> onclick="if(confirm(\'Are you sure?\')) return false;" /&gt;\n</code></pre>\n\n<p>but this did</p>\n\n<pre><code>onclick="if(confirm(\\"Are you sure?\\"))return true; else return false;"\n</code></pre>\n'}, {'answer_id': 4542190, 'author': 'iordan', 'author_id': 555424, 'author_profile': 'https://Stackoverflow.com/users/555424', 'pm_score': 4, 'selected': False, 'text': '<p>Can be simplified like this</p>\n\n<pre><code>onclick="return confirm(\'Are you sure?\');"\n</code></pre>\n'}, {'answer_id': 4622401, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 0, 'selected': False, 'text': '<pre><code>var deleteClick;\nvar mess="xxx";\nfunction assignDeleteClick(link) {\n    if (link.onclick == confirmDelete) {\n        return;\n    }\n    deleteClick = link.onclick;\n    link.onclick = confirmDelete;\n}\n\n\nfunction confirmDelete() {\n    var ans = confirm(mess);\n    if (ans == true) {\n        return deleteClick();\n    } else {\n        return false;\n    }\n} \n</code></pre>\n\n<p>use this code for jsf 1.1.</p>\n'}, {'answer_id': 6113403, 'author': 'Hanynowsky', 'author_id': 754756, 'author_profile': 'https://Stackoverflow.com/users/754756', 'pm_score': 3, 'selected': False, 'text': '<p>This worked for me:</p>\n\n<pre><code>&lt;h:commandButton title="#{bundle.NewPatient}" action="#{identifController.prepareCreate}"  \n                                             id="newibutton" \n                                             onclick="if(confirm(\'#{bundle.NewPatient}?\'))return true; else return false;" \n                                             value="#{bundle.NewPatient}"/&gt;\n</code></pre>\n'}]
['https://Stackoverflow.com/questions/73628', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/9254/']