Cha*_*dle 2 html javascript php forms jquery
我花了5个小时才完成这项工作.我只是想提交一个表单并要求用jquery ui弹出窗口确认删除,当确认它进入表单提交并转到delete.php.
为简单起见,我已将其剥离了:
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/black-tie/jquery-ui.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.1.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#formDelete').submit(function(e){
e.preventDefault();
$('#dialog').dialog('open');
});
$('#dialog').dialog({
autoOpen: false,
modal: true,
buttons: {
"Confirm": function() {
$('#formDelete').submit();
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
});
</script>
</head>
<body>
<div id="dialog">
<p>Are you sure you want to delete?</p>
</div>
<form id="formDelete" name="formDelete" action="delete.php" method="POST" >
<input name="id" type="hidden" value="1">
<input name="submit" type="submit">
</form>
</body>
</html>
我点击是按钮,没有任何反应.我已经尝试将提交ID更改为与表单相同但读取只是循环所有内容.
我不能雄辩地陈述原因,但我发现它含糊不清,如果你像这样使用它:
<input name="submit" type="submit">
^^ input name submit
$('#formDelete').submit();
^^
我不知道原因,但它冲突,所以永远不要命名按钮"submit",而只是在名称上附加一个数字,以避免冲突.
试试这个:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<div id="dialog">
<p>Are you sure you want to delete?</p>
</div>
<form id="formDelete" action="delete.php" method="POST">
<input name="id" type="hidden" value="1" />
<input name="submit1" type="submit" />
</form>
<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('input[name="submit1"]').on('click', function(e){
e.preventDefault();
$('#dialog').dialog('open');
});
$('#dialog').dialog({
autoOpen: false,
modal: true,
buttons: {
"Confirm": function(e) {
$(this).dialog('close');
$('#formDelete').submit();
},
"Cancel": function() {
$(this).dialog('close');
}
}
});
});
</script>
旁注:其实我以前有点绊倒这个问题,但是我再也找不到了(实际上正确答案有解释但是我在这里找不到它).
编辑:啊,这里是:
补充说明:
形式及其子元素不应该使用输入名称或ID与表格的属性,如冲突
submit,length或method.名称冲突可能导致混乱的故障.