+- Sick Gaming (https://www.sickgaming.net)
+-- Forum: Programming (https://www.sickgaming.net/forum-76.html)
+--- Forum: PHP Development (https://www.sickgaming.net/forum-82.html)
+--- Thread: [Tut] JavaScript Confirm Dialog Box with Yes No Alert (/thread-100210.html)
[Tut] JavaScript Confirm Dialog Box with Yes No Alert - xSicKxBot - 11-11-2022
JavaScript Confirm Dialog Box with Yes No Alert
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2022/11/javascript-confirm-dialog-box-with-yes-no-alert.jpg" width="550" height="120" title="" alt="" /></div><div><div class="modified-on" readability="7.1489361702128"> by <a href="https://phppot.com/about/">Vincy</a>. Last modified on November 10th, 2022.</div>
<p>confirm() is a well-known JavaScript basic function.</p>
<p>Many user actions need to be confirmed if the change is going to be permanent. For example, the <a href="https://phppot.com/jquery/ajax-add-edit-delete-records-in-database-using-php-and-jquery/">delete operation of CRUD functionality</a>.</p>
<p>It needs to get confirmation from the user before permanently deleting the data.</p>
<p>This tutorial will explain more about this JavaScript basic concept with examples.</p>
<h2>Quick example</h2>
<p>This quick example shows the JS script to do the following.</p>
<ul>
<li>It shows a confirm box with a consent message passed as an argument to the confirm() function.</li>
<li>It handles the yes or no options based on the user’s clicks on the OK or ‘cancel’ button of the confirm box.</li>
</ul>
<div class="post-section-highlight" readability="33">
<pre class="prettyprint"><code class="language-javascript">if (confirm('Are you sure?')) { //action confirmed console.log('Ok is clicked.');
} else { //action cancelled console.log('Cancel is clicked.');
}
</code></pre>
</div>
<h2><img loading="lazy" class="alignnone size-large wp-image-20005" src="https://phppot.com/wp-content/uploads/2022/11/javascript-confirm-550x120.jpg" alt="javascript confirm" width="550" height="120" srcset="https://phppot.com/wp-content/uploads/2022/11/javascript-confirm-550x120.jpg 550w, https://phppot.com/wp-content/uploads/2022/11/javascript-confirm-300x65.jpg 300w, https://phppot.com/wp-content/uploads/2022/11/javascript-confirm-768x167.jpg 768w, https://phppot.com/wp-content/uploads/2022/11/javascript-confirm.jpg 1000w" sizes="(max-width: 550px) 100vw, 550px"></h2>
<p>Key points of javascript confirm box.</p>
<p>The JavaScript confirm box is a consent box to let the user confirm or cancel the recent action.</p>
<p>The Javascript confirm() function accepts an optional message to be shown on the consent box.</p>
<p>It also displays the OK and ‘Cancel’ buttons to allow users to say yes or no about the confirmation consent.</p>
<p>This function returns a boolean <em>true</em> or <em>false</em> based on the button clicks on the confirm dialog box.</p>
<h3><strong>Syntax</strong></h3>
<pre class="prettyprint"><code class="language-javascript">confirm(message);
</code></pre>
<h2>Example 2: Show JavaScript confirm box on a button click</h2>
<p>This example connects the on-click event and the JS handler created for showing the confirm box.</p>
<p>This JS code contains the HTML to display two buttons “Edit” and “Delete”. Each has the onClick attribute to call the JavaScript custom handler <em>doAction()</em>.</p>
<p>This handler shows JavaScript confirm dialog and monitors the users’ option between yes and no. This program logs the user’s action based on the yes or no option.</p>
<pre class="prettyprint"><code class="language-php-template"><button onClick='doAction("Edit", "Are you sure want to edit?");'>Edit</button>
<button onClick='doAction("Delete", "Delete will permanently remove the record. Are you sure?");'>Delete</button>
<script> function doAction(action, message) { if (confirm(message)) { //If user say 'yes' to confirm console.log(action + ' is confirmed'); } else { //If user say 'no' and cancelled the action console.log(action + ' is cancelled'); }
};
</script>
</code></pre>
<h2>Example 3: Call confirm dialog inline</h2>
<p>This calls the confirm() function inline with the HTML onClick attribute.</p>
<p>Most of the time this inline JS of calling confirm dialog is suitable. For example, if no callback has to be executed based on the users’ yes or no option, this method will be useful.</p>
<p>In this example, it gets user confirmation to submit the form to the server side.</p>
<pre class="prettyprint"><code class="language-php-template"><form onSubmit='return confirm("Are you sure you want to send the data")'>
<input type="text" name="q" />
<input type="submit" name="submit" value="Send" />
</form>
</code></pre>
<h2>Example 4: Pass confirm message using data attribute</h2>
<p>This example contains a JS script to map the HTML button’s click event to show the confirmation dialog box.</p>
<p>It minimizes the effort of defining JS functions and calling them with the element to show the JavaScript confirmation.</p>
<p>It simplifies the number of lines in the code. It adds an on-click event listener for each button element shown in the HTML.</p>
<p>It uses <a href="https://phppot.com/javascript/for-each-javascript/">JavaScript forEach</a> to get the target button object for this event mapping. On each on-click event, it calls the confirm() function to show the dialog box.</p>
<pre class="prettyprint"><code class="language-php-template"><button data-confirm-message="Are you sure want to edit?">Edit</button>
<button data-confirm-message="Delete will permanently remove the record. Are you sure?">Delete</button>
<script> document.querySelectorAll('button').forEach(function(element) { element.addEventListener('click', function(e) { if(confirm(e.target.dataset.confirmMessage)) { console.log("confirmed"); } });
});
</script>
</code></pre>
<h2>More about JavaScript confirm box</h2>
<p>The JavaScript confirm box is a kind of dialog box. It requires user action to confirm or cancel a recently triggered action. It is the method of the JavaScript window object.</p>
<p>There are more functions in JavaScript to display the dialog with controls. Examples,</p>
<ol>
<li>alert() – Alert box with an Okay option.</li>
<li>prompt() – Prompt dialog with an input option.</li>
</ol>
<p><strong>Note:</strong></p>
<p>While displaying the JavaScript dialog box, it stops window propagations outside the dialog.</p>
<p>In general, displaying a dialog window on a web page is not good practice. It will create friction on the end-user side.</p>
<p>We have already seen a <a href="https://phppot.com/jquery/jquery-thickbox/">custom dialog using jQuery</a>. Let us see how to display the jQuery confirm dialog in the next article. With custom dialog, it has the advantage of replacing the default button controls.<br /><a class="download" href="https://phppot.com/downloads/javascript/javascript-confirm.zip">Download</a></p>
<p> <!-- #comments --> </p>
<div class="related-articles">
<h2>Popular Articles</h2>
</p></div>
<p> <a href="https://phppot.com/javascript/javascript-confirm/#top" class="top">↑ Back to Top</a> </p>
</div>
https://www.sickgaming.net/blog/2022/11/09/javascript-confirm-dialog-box-with-yes-no-alert/