到目前为止,我有一个html表单,允许用户发布一些数据。这是我需要表单处理发生的步骤。
1、一旦用户在页面A上提交了数据,它就会在页面A上弹出一个Jquery对话框窗口,让用户确认他们所做的是正确的还是错误的。
2、在对话框窗口上点击yes后,我需要它再次把它带到A页。然后,同一页面将根据按下的按钮是yes还是no来处理逻辑。
3、逻辑将重定向到页B或只输出验证错误。
A页
表单允许用户提交数据
<form style="display:block" id="edit-user" name="input" action="" method="post">
<?php
if(isset($users)) {
echo "<select name='users'>";
foreach($users as $user) {
echo "<option value='".$user."'>".$user."</option>";
}
echo "</select>
<input type='submit' value='Submit' name='edit-user'>";
}
?>
来自同一页面的表单发布后,Page A上弹出的对话框窗口。
if($_POST['edit-user']) { ?>
<script type="text/javascript">
$(function() {
$("#dialog-confirm").dialog({
dialogClass: "no-close smaller-text",
resizable: false,
height:160,
modal: true,
buttons: {
"Yes": function() {
$(this).dialog( "close" );
},
Cancel: function() {
$(this).dialog( "close" );
}
}
});
});
</script>
<?php } ?>
有解决方案吗?如果有其他方法,请分享。
<form style="display:block" id="edit-user" name="input" action="" method="post">
<?php
if(isset($users))
{
echo "<select name='users' id='users'>";
foreach($users as $user)
{
echo "<option value='".$user."'>".$user."</option>";
}
echo "</select>
<input type='button' value='Submit' onclick='validate();'>";
}
?>
<script>
function validate()
{
var user = getElementById('#users').value;
$("#dialog-confirm").dialog({
dialogClass: "no-close smaller-text",
resizable: false,
height:160,
modal: true,
buttons: {
"Yes": function() {
/*Do the client side validation.
For server side validation make use of ajax. In
server side validation, handle rest of the script according to response.
*/
if(VALIDATION FAIL)
{//output error
$(this).dialog( "close" );}else{
window.location.href = 'Url to Page B'; //If validation is success
}
},
Cancel: function() {
$(this).dialog( "close" );
}
}
});
}
</script>
您可以尝试这样做:
页面<form id="edit-user" name="input" action="" method="post">
...your input fields here...
<button type="button" id="submitBtn">Submit</button>
</form>
Page A Script
<script type="text/javascript">
$(function() {
$('#submitBtn').on('click',function(){
$("#dialog-confirm").dialog({
dialogClass: "no-close smaller-text",
resizable: false,
height:160,
modal: true,
buttons: {
"Yes": function() {
$(this).dialog( "close" );
$('#edit-user').submit();
},
Cancel: function() {
$(this).dialog( "close" );
}
});
});
});
</script>