JSFiddle - React, Tailwind, and code Playground
HTML
<form id="myform" action="javascript:alert('Success!')" method="post">
<input type="text" name="check_me" />
<input type="submit" name="btnSubmit" value="Go!" />
</form>
<div id="confirm" style="display:none;">Please confirm that you want to submit</div>
JavaScript
$(document).ready(function(){
var submitForm = $('#myform');
submit = false;
$("#confirm").dialog({
resizable: false,
height: 140,
modal: true,
autoOpen: false,
buttons: {
'Submit': function() {
$(this).dialog('close');
submit = true;
submitForm.submit();
},
'Cancel': function() {
$(this).dialog('close');
}
}
});
$("#confirm").parent().appendTo($("#myform"));
submitForm.submit(function() {
if (submit) {
return true;
} else {
$("#confirm").dialog('open');
return false;
}
});
});