0
以下のサンプルコードブロックは単純なブートストラップ形式で構成されており、基本的なjavascript確認ウィンドウの代わりにjqueryUI Modal Dialogを使用しています。jQueryの確認ダイアログモーダル - フォームを正常に送信できません
送信ボタンをクリックしてフォームを送信すると、jqueryUIモーダルウィンドウが表示されますが、問題はありません。
If;
私は "いいえ" をクリックしてください - 私はすべての3つのにconsole.logメッセージすなわち
- 1-Confirmation_In_Progress
- 4-Confirmation_Cancelled
- 5-Confirmation_Cancelled
の場合を取得します。
私は "はい" をクリックしてください - 私はすべての3件のにconsole.logメッセージがそこで私は結論
- 1-Confirmation_In_Progress
- 2-Confirmation_AboutTo
- 3-Confirmation_Done
、すなわち取得します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の確認ウィンドウを使用する - フォームが正しく送信されます。
'$（event.target）.closest（）'がフォームを選択していないと思われます。コンソールにエラーやアラートがありますか？ – Twisty
Twisty- @私は "はい" をクリックしてください - 私はすべての3件のにconsole.logメッセージが 1-Confirmation_In_Progress 2-Confirmation_AboutTo 3-Confirmation_Done – MarcoZen
@Twistyすなわち取得 - Javascriptの確認ボックス（戻り確認を（））の交換を非常に思えますjQueryで面倒です。あなたは何を使うのですか ？ – MarcoZen