我有一个示例代码块，下面是一个简单的引导程序表单，我使用jqueryUI模态对话框作为基本javascript确认窗口的替代。
当我通过单击提交按钮提交表单时，jqueryUI模式窗口会弹出而没有任何问题。
如果;
我点击“否” - 我得到所有3个console.log消息，即
如果;
我点击“是” - 我得到所有3个console.log消息，即
因此，我得出结论，jquery代码必须在某种程度上起作用，但表单值似乎没有发布。
我尝试了各种方法来提交表单，如下所示。 知道我的jquery表单提交有什么问题吗？
表格代码如下;
<!DOCTYPE html>
<html>
<head>
<title> Simple BootStrap Form - jQuery UI Modal Dialog as Confirmation Box </title>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="all" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">
<!-- CSS -->
<style>
.customColor { background: darkturquoise; }
.jqDialogAdjust { float: left; margin: 2px 2px 0 0; }
.no-close .ui-dialog-titlebar-close { display: none }
</style>
</head>
<!-- HTML -->
<body>
<div class="container">
<br><br>
<a href="<?php echo $_SERVER['PHP_SELF']; ?>"> HOME </a>
<br><br>
<?php
if ( isset($_POST['submit_btn']) ) {
echo "<br>"."<br>";
echo "Name :".$_POST['name']."<br>";
echo "Email :".$_POST['email']."<br>";
} else {
?>
<form id="simpleform" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" >
<div class="form-group">
<label for="name">Your Name:</label>
<input type="text" class="form-control" name="name" id="name">
</div>
<div class="form-group">
<label for="email">Your Email:</label>
<input type="email" class="form-control" name="email" id="email">
</div>
<button type="submit" class="btn btn-default" name="submit_btn" id="submit_btn" value="submit_btn" >Submit</button>
</form>
<div id="confirmdialog" title="Confirmation Required"></div>
<?php } ?>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"> </script>
<script type="text/javascript" >
$(document).ready(function(){
$("#submit_btn").click(function(event){
console.log('1-Confirmation_In_Progress');
event.preventDefault();
var $target = $( event.target );
var message = 'Proceed With Action?';
var icon = '<span class="ui-icon ui-icon-alert jqDialogAdjust" ></span>';
$('#confirmdialog').html('<p>' + icon + message + '</p>');
$("#confirmdialog").dialog({
autoOpen : false,
modal : true,
height: 170,
width: 340,
resizable: false,
draggable:false,
closeOnEscape: true,
title : " :: Confirmation Required :: ",
classes: {
"ui-dialog-titlebar": "ui-corner-all customColor"
},
dialogClass: "no-close",
buttons: [{
text : "Yes",
click : function() {
console.log('2-Confirmation_AboutTo');
//die;
$target.closest("form").submit();
//$('form#simpleform').submit();
console.log('3-Confirmation_Done');
$(this).dialog("close");
}
},
{
text : "No",
click : function() {
console.log('4-Confirmation_Cancelled');
$(this).dialog("close");
console.log('5-Confirmation_Cancelled');
}
}]
}); // end of confirmdialog.dialog
$('#confirmdialog').dialog('open');
}); // end of submit_btn.click(function(event)
}); // end jQuery Document Ready
</script>
</body>
</html>
上面的代码块是通过在StackOverFlow上引用各种片段而放在一起的，但不知怎的，我只是不能让表单提交。如果我删除jquery行并使用基本的javascript确认窗口 - 表单正确提交。
答案 0 :(得分：0)
我创建了一个测试小提琴并尝试复制该问题。我不能。最好先定义Dialog，然后再定义事件。
例如：https://jsfiddle.net/Twisty/f0sa5nmL/
<强>的JavaScript
$(function() {
$("#confirmdialog").dialog({
autoOpen: false,
modal: true,
height: 170,
width: 340,
resizable: false,
draggable: false,
closeOnEscape: true,
classes: {
"ui-dialog-titlebar": "ui-corner-all customColor"
},
dialogClass: "no-close",
buttons: [{
text: "Yes",
click: function() {
console.log('2-Confirmation_AboutTo');
$("#simpleform").submit();
console.log('3-Confirmation_Done');
$(this).dialog("close");
}
}, {
text: "No",
click: function() {
console.log("4-Confirmation_Cancelled");
$(this).dialog("close");
console.log("5-Confirmation_Cancelled");
}
}]
});
$("#submit_btn").click(function(event) {
console.log("1-Confirmation_In_Progress");
event.preventDefault();
$("#confirmdialog").dialog("open");
});
});
如果我选择否，我会：
1-Confirmation_In_Progress 4-Confirmation_Cancelled 5-Confirmation_Cancelled
表单未提交，对话框关闭。如果我选择是，我会：
1-Confirmation_In_Progress 2-Confirmation_AboutTo 3-Confirmation_Done
然后表单尝试提交（并且因为它无法在小提琴中将自己提交给自己而失败。）
希望有所帮助。
答案 1 :(得分：0)
正如我在上面对用户Twisty的评论中所提到的，看起来我的问题就是这一行;
if ( isset($_POST['submit_btn']) ) {
echo "<br>"."<br>";
echo "Name :".$_POST['name']."<br>";
echo "Email :".$_POST['email']."<br>";
}
Jquery表单提交不包括超级全局后的按钮名称和值。将if更改为“name”或“email”允许显示帖子值。
只要if条件不是基于按钮名称/值，所有这些表单提交都会起作用。
$target.closest("form").submit();
$('form[name="simpleform"]').submit();
$('form#simpleform').submit();
document.forms["simpleform"].submit();
document.getElementById("simpleform").submit()
$('#simpleform').submit();
感谢。