jQuery Potwierdzenie zmian wprowadzonych do formularzaa

Witam, pracuje nad projektem na zaliczenie na studia, pracuje obecnie nad tym, że jeżeli ktoś edytuje dane w formularzu to po kliknieciu przycisku submit ma wyskoczyc powiadomienie Czy na pewno .... i opcja do klikniecia tak lub nie.

W tej chwili mój kod wyglada tak:

{include file="header.html.php"}
<div class="panel-heading" style="text-align: center;" >

<br />
<h3>  <font color="red"> Panel administratora </font> </h3> </div>

<ul class="nav nav-tabs ">
  <li role="presentation" class="active"><a href="http://{$smarty.server.HTTP_HOST}{$subdir}Access/admin/promanager/">Menadżer kategorii</a></li>
  <li role="presentation"><a href="http://{$smarty.server.HTTP_HOST}{$subdir}Access/admin/unitmanager/">Menadżer jednostek</a></li>
  <li role="presentation"><a href="http://{$smarty.server.HTTP_HOST}{$subdir}Access/admin/statistic/">Statystyki</a></li>
  <li role="presentation"><a href="http://{$smarty.server.HTTP_HOST}{$subdir}Access/admin/employees/">Pracownicy</a></li>
  <li role="presentation"><a href="http://{$smarty.server.HTTP_HOST}{$subdir}Access/admin/free/">Wolna zakładka</a></li>
</ul>
<div class="container">
<div style="padding-top:25px"></div>


<div class="page-header">
  <h1>Lista kategorii</h1>
</div>

{if $allCats|@count === 0}
	<div class="alert alert-danger" role="alert">Brak kategorii w bazie!</div>
{else}
<div class="row">
<div class="col-md-6">
<ul class="list-group">
	{assign var=index value=0}
	{assign var=half value=(($allCats|@count/2 + 0.5)|intval)}
	{foreach $allCats as $key => $name}
		<li class="list-group-item">
		<form id="{$key}" method="POST" action="http://{$smarty.server.HTTP_HOST}{$subdir}Categories/edit">
		<span class="name-edit" id="opis{$key}" value="{$name}">{$name|upper}</span>
		<span class="input-edit" id="in{$key}"><input type="text" name="categoryname" id="input{$key}" /><input type="hidden" name="id" value="{$key}"/></span>
		
		<span class="ok-edit" id="ok{$key}" style="display: inline;float: right;">
					<button type="subbmit" id="{$key}" class="btn btn-info"> <span class="glyphicon glyphicon-ok"></span> </button>  
					<span class="cancel" id="cancel"><a type="button" id="{$key}" class="btn btn-danger"> <span class="glyphicon glyphicon-remove"></span> </a></span>
		</span>
		
			<div class="btn-group btn-group-xs pull-right" id="li{$key}" role="group" aria-label="...">
				<p style="display: inline-block;float: left;"><a type="button" id="{$key}" class="btn btn-info btn-xs" > Edycja </a></p>
				{if isset($countProds[$key])}
					<a type="button" class="btn btn-success" href="http://{$smarty.server.HTTP_HOST}{$subdir}Products/showcat/{$key}">
					 pokaż produkty <span class="badge">{$countProds[$key]}</span>
					</a>
					
				{else}
					<a type="button" class="btn btn-default disabled" href="http://{$smarty.server.HTTP_HOST}{$subdir}Products/showcat/{$key}">
					 brak produktów <span class="badge">0</span>
					</a>
				{/if}
					{if $typkonta=="Administrator"}<a type="button" id="usun" class="btn btn-danger" href="http://{$smarty.server.HTTP_HOST}{$subdir}Categories/delete/{$key}">usuń</a>{/if}
				
				
			</div>
		</form>	
		</li>
{$index = $index + 1}	
{if $index == $half}
</ul>
</div>
<div class="col-md-6">
<ul class="list-group">		
{/if}		
	{/foreach}
</ul>
</div>
</div>
{/if}

<a type="button" class="btn btn-default" href="http://{$smarty.server.HTTP_HOST}{$subdir}Categories/add">Dodaj kategorię</a>
</div>

 
  </div>
  </div>
  
  
<script>

$("span.input-edit").hide();
$("span.ok-edit").hide();
$( "p" ).find("a").click(function( event ) {
  event.preventDefault();
 
  var id = $(this).attr('id');
  var value = $( "#opis" +id).text();
  $( "#li"+id ).hide();
  $('#input'+id).val(value);
  $("#opis"+id).hide();
  $("#in"+id).show();
  $("#ok"+id).show();

});

$( "span.cancel" ).find("a").click(function( event ) {
  event.preventDefault();
 
  var id = $(this).attr('id');
  $("#in"+id).hide();
  $("#ok"+id).hide();
  $('#input'+id).val("");
  $("#li"+id).show();
  $("#opis"+id).show();


});

</script>
<script> $(function () {
    'use strict';

    function confirmDialog(title, message, success) {
        var confirmdialog = $('<div></div>').appendTo('body')
            .html('<div><h6>' + message + '</h6></div>')
            .dialog({
                modal: true,
                title: title,
                zIndex: 10000,
                autoOpen: false,
                width: 'auto',
                resizable: false,
                buttons: {
                    Yes: function () {
                        success();
                        $(this).dialog("close");
                    },
                    No: function () {
                        $(this).dialog("close");
                    }
                },
                close: function() {
                    $(this).remove();
                }
            });

        return confirmdialog.dialog("open");
    }

    $('form').on('submit', function (e) {
        e.preventDefault();
        var form = this;

        confirmDialog('Confirm', 'Are you sure?', function () {
            form.submit();
        });
    });
}); </script>
<!-- <script src="http://{$smarty.server.HTTP_HOST}{$subdir}js/editconfirm.js"></script>-->
 
{include file="footer.html.php"}

Problem w tym, że pojawia się błąd, zamiast pokazywać się okienko z treścią i opcjami do wyboru tylko na dole strony pojawia się napis Are you sure?

Kod odpowiedzialny za pokazywanie się okienka znalazłem w internecie (gdyż pierwszy raz robię coś takiego, żeby po prostu się nauczyć), czytając go wywnioskowałem, że po kliknięciu przycisku subbmit w obojętnie jakim formularzu powinno wyskoczyć okienko z komunikatem i możliwymi opcjami do wyboru. Niestety tak się nie dzieje. Proszę bardzo o pomoc i z góry dziękuje!

Tak wygląda w tej chwili:

Nie możesz użyć zwykłego: https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm ?