Trying to make confirmation box with JavaScript, JQuery…not working -

Trying to make confirmation box with JavaScript, JQuery…not working -

i'm new-ish jquery , js, basic i'm missing. in html have form:

<form action="" method="post" onsubmit="return confirm_del()"> //….etc….. <button type="submit" class="btn btn-sm btn-danger">delete</button> </form>

i want create confirmation box delete button. have following, text of confirmation box:

<div id='confirmation_dialogue'> pressing 'delete' delete item database. action cannot undone <br><br> pressing cancel not alter database. </div>

under that, have next in order handle onsubmit function:

<script type="text/javascript"> function confirm_del(){ alert("cd"); $("#confirmation_dialogue").dialog({ autoopen : false, modal : true, title : "<div class='widget-header'><h4><i class='icon-ok'></i> delete item </h4> </div>", buttons : [{ html : "cancel", "class" : "btn btn-default", click : function() { $(this).dialog("close"); homecoming false; } }, { html : "delete", "class" : "dialog btn btn-info", click : function() { $(this).dialog("close"); homecoming true; } }] }); } //…..and on, until </script>

what happens text of confirmation box appears @ bottom of screen--as if there no jq function addressing it. if take jq out of confirm_del() function, can't seem confirm_del phone call it. now, in function, seems ignored--the confirm box not appear, , delete happens.

demo

i not recommend using inline js; it's bad practice. plus, reason else may explain better, return true , return false dialog button click handlers not work way expect them ... there's break in execution not allow these true/false homecoming values of function. separate markup , js cleanly follows:

html

<form id="del_form" action="" method="post"> <!-- <<<<<<<== --> <button type="submit" class="btn btn-sm btn-danger">delete</button> </form> <div id='confirmation_dialogue'> pressing 'delete' delete item database. action cannot undone <br><br> pressing cancel not alter database. </div>

javascript/jquery

$(document).ready(function() { $("#confirmation_dialogue").dialog({ autoopen : false, modal : true, title : "<div class='widget-header'><h4><i class='icon-ok'></i> delete item </h4> </div>", buttons : [{ html : "cancel", "class" : "btn btn-default", click : function() { $(this).dialog("close"); } }, { html : "delete", "class" : "dialog btn btn-info", click : function() { $(this).dialog("close"); $('#del_form')[0].submit(); //<<<<<<<=== } }] }); $('#del_form').on('submit', function(e) { e.preventdefault(); $('#confirmation_dialogue').dialog('open'); //<<<<<<=== }); });

javascript jquery