0
기본 자바 스크립트 확인 창을 대신하여 jqueryUI 모달 대화 상자를 사용하는 간단한 부트 스트랩 양식으로 구성된 샘플 코드 블록이 있습니다.jQuery 확인 대화 상자 모달 - 양식을 성공적으로 제출할 수 없습니다.
제출 버튼을 클릭하여 양식을 제출하면 jqueryUI 모달 창이 아무런 문제없이 팝업됩니다.
만약;
나는 "아니오"를 클릭 - 나는 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>
위의 코드 블록은 여기에 유래에 여러 조각으로 다스 려에 의해 함께 넣어 어떻게 든 난 그냥 질수 양식 제출에 도착했다. jquery 줄을 제거하고 기본 javascript 확인 창을 사용하면 양식이 제대로 제출됩니다.
'$ (event.target) .closest()'가 양식을 선택하지 않은 것으로 의심됩니다. 콘솔의 모든 오류 또는 경고? – Twisty
Twisty- @ 나는 "예"를 클릭 - 나는 3을 console.log 메시지 1 Confirmation_In_Progress 2 Confirmation_AboutTo 3 Confirmation_Done 즉 얻을 – MarcoZen
@Twisty이 - 자바 스크립트 확인 상자를 교체 (반환 확인은()) 보인다 꽤 번거로운 jQuery. 당신은 무엇을 사용합니까? – MarcoZen