如何在表单提交时弹出javascript,并在浏览器中禁用javascript时执行操作



我有以下重定向到确认页面的表单,当浏览器中禁用javascript时,我希望保持这种行为,但当启用javascript时,我们希望使用弹出窗口进行确认。当启用javascript只显示确认弹出窗口时,我如何禁用表单操作?ps:我必须使用jquery ui轻量级插件,这就是为什么我不使用引导模式的原因。

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="lib/jquery-ui-1.12.1.ui-lightness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<link href="lib/jquery-ui-1.12.1.ui-lightness/jquery-ui.theme.min.css" rel="stylesheet" type="text/css" />
<link href="lib/jquery-ui-1.12.1.ui-lightness/jquery-ui.structure.min.css" rel="stylesheet" type="text/css" />
<script src="lib/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="lib/jquery-ui-1.12.1.ui-lightness/jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
<script>
$("#btn_trash").click(function() {
var ret = null;
$('#confirmDialog').dialog({
resizable: false,
height: 300,
width: 500,
modal: true,
autoOpen: true,
buttons: {
Oui: function() {
ret = "yes";
$(this).dialog("close");
},
Non: function() {
ret = "no";
$(this).dialog("close");
}
},
close: function() {
if (ret !== null)
$("#content").html("You answered <b>" + ret + "</b>.");
else
$("#content").html("You didn't answer.");
}
});
});
</script>

<form id="delete_board_form" action='board/submit_delete' method='post'>
<input type='text' name='delete' value='<?= $board->id ?>' hidden>
<button id="btn_trash" class="btn" type="Submit">
<svg class="bi text-white" width="20" height="20">
<use xlink:href="assets/ressources/bootstrap-icons/bootstrap-icons.svg#trash" />
</svg>
</button>
</form>
<div id="content"></div>
<div id="confirmDialog" title="Attention" hidden>
<p>Confirmez-vous le lancement de cette opération irréversible ?</p>
</div>
</body>

对我有用的是使用event.prventDefault((

<form id="delete_board_form" action='board/submit_delete' method='post' onsubmit="event.preventDefault()">
<input type='text' name='delete' value='<?= $board->id ?>' hidden>
<button id="btn_trash" class="btn" type="Submit">
<svg class="bi text-white" width="20" height="20">
<use xlink:href="assets/ressources/bootstrap-icons/bootstrap-icons.svg#trash" />
</svg>
</button>
</form>
<div id="content"></div>
<div id="confirmDialog" title="Attention" hidden>
<p>Confirmez-vous le lancement de cette opération irréversible ?</p>
</div>
````

最新更新