JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="dialog-confirm" title="Ready?">
<p>Are you sure?</p>
</div>
<form action"" id="myform" name="myform2" type="post">
<input type="submit" value="Yes" name="moveOn" />
</form>
JavaScript
$(function() {
var postForm = false;
$("#dialog-confirm").dialog({
resizable: false,
height:190,
autoOpen: false,
width: 330,
modal: true,
buttons: {
"Yes": function() {
postForm = true;
$('#myform').submit();
},
"No": function() {
$("#dialog-confirm").dialog("close");
}
}
});
$('#myform').on('submit', function(e) {
if(!postForm) {
e.preventDefault();
$("#dialog-confirm").dialog('open');
} else {
console.log('form submitted.')
}
});
});